列头标题JSON:
{
"columns": [{
"field": "id",
"title": "序号",
"sortable": true
}, {
"field": "title",
"title": "标题",
"sortable": false
}, {
"field": "classid",
"title": "所属分类",
"sortable": true
}, {
"field": "hits",
"title": "浏览量",
"sortable": true
}, {
"field": "descriptor",
"title": "描述",
"sortable": false
}]
}
html
<!DOCTYPE html>
<html>
<head>
<title>Fixed Columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-table.css">
<link rel="stylesheet" href="css/bootstrap-table-fixed-columns.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/bootstrap-table-fixed-columns.js"></script>
</head>
<body>
<div class="container">
<h1>Fixed Columns</h1>
<div class="toolbar form-inline">
<span>Fixed Number: </span>
<input class="form-control" id="fixedNumber" type="number" value="1" min="1" max="5">
</div>
<table id="table" data-height="400" data-show-columns="true"></table>
</div>
<script>
var $table = $('#table');
$(function () {
buildTable($table, 20, 20);
$('#fixedNumber').change(function () {
buildTable($table, 20, 20);
});
});
function buildTable($el, cells, rows) {
var i, j, row,
columns = [],
data = [];
$.ajax({
type: "get",
async: false,
url: "data.json",
dataType: "json",
success: function(json){
columns = json.columns;
// data = json.data;
}
})
$.ajax({
type: "get",
async: false,
url: "http://e945.net/index.php?c=api&a=data&jsoncallback=?",
dataType: "jsonp",
jsonp: "jsoncallback",
// jsonpCallback: "", //回调
success: function(jsonp){
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: jsonp,
search: true,
toolbar: '.toolbar',
fixedColumns: true,
fixedNumber: +$('#fixedNumber').val()
});
}
})
}
</script>
</body>
</html>```