bootstrap-table_Ajax加载数据到表格(1)

75 阅读 0 评论 50 点赞

我是靠谱客的博主大方蜗牛，最近开发中收集的这篇文章主要介绍bootstrap-table_Ajax加载数据到表格(1)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

columns数组中的title对应列名称, data对应记录集

data.json如下:

{
"columns": [{
"field": "field0",
"title": "Cell0",
"sortable": true
}, {
"field": "field1",
"title": "Cell1",
"sortable": true
}, {
"field": "field2",
"title": "Cell2",
"sortable": true
}, {
"field": "field3",
"title": "Cell3",
"sortable": true
}, {
"field": "field4",
"title": "Cell4",
"sortable": true
}],
"data": [{
"field0": "Rows-0-0",
"field1": "Rows-0-1",
"field2": "Rows-0-2",
"field3": "Rows-0-3",
"field4": "Rows-0-4"
}, {
"field0": "Rows-1-0",
"field1": "Rows-1-1",
"field2": "Rows-1-2",
"field3": "Rows-1-3",
"field4": "Rows-1-4"
}]
}

demo

<!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;
}
})
// console.dir(columns);
// console.dir(data);
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
search: true,
toolbar: '.toolbar',
fixedColumns: true,
fixedNumber: +$('#fixedNumber').val()
});
}
</script>
</body>
</html>