使用 json 实现数据表格的分页显示。
方法一,使用 json 格式的数据,实现分页显示。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic -->
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
</head>
<body>
<div class="col-md-offset-3 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title text-center">已添加教师账号</h3>
</div>
<div class="panel-body">
<div id="toolbar" class="btn-group">
<button id="btn_edit" type="button" class="btn btn-default" >
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="teacher_table" data-toggle="table" data-url="data1.json" data-method="post"
data-query-params="queryParams"
data-toolbar="#toolbar"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-page-size="5"
data-striped="true"
>
<thead>
<tr>
<th data-field="id">用户账号</th>
<th data-field="name">用户密码</th>
<th data-field="price">教师姓名</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
var mydata = '{"employees":[' +
'{"name":"John","pwd":"Doe","t_name":"John"},' +
'{"name":"John","pwd":"Doe","t_name":"John"},' +
'{"name":"John","pwd":"Doe","t_name":"John"},' +
'{"name":"John","pwd":"Doe","t_name":"John"}]}';
// obj = JSON.parse(txt);
//
// document.getElementById("fname").innerHTML=obj.employees[1].firstName
// document.getElementById("lname").innerHTML=obj.employees[1].lastName
</script>
</body>
</html>
方法二,使用 json 文件和标题栏实现数据的分页显示
方式三,添加参数配置<!DOCTYPE html> <html lang="en"> <head> <!-- Basic --> <meta charset="UTF-8" /> <title>Dashboard | Nadhif - Responsive Admin Template</title> <link rel="stylesheet" href="bootstrap.min.css"> <link rel="stylesheet" href="bootstrap-table.css"> <script src="jquery.min.js"></script> <script src="bootstrap.min.js"></script> <script src="bootstrap-table.js"></script> <script src="bootstrap-table-zh-CN.js"></script> </head> <body> <table id="table" data-query-params="queryParams" data-toolbar="#toolbar" data-pagination="true" data-search="true" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-page-size="5" > </table> <script> $('#table').bootstrapTable({ url: 'data1.json', columns: [{ field: 'id', title: 'Item ID' }, { field: 'name', title: 'Item Name' }, { field: 'price', title: 'Item Price' }, ] }); <!--$('#table').bootstrapTable({--> <!--columns: [{--> <!--field: 'id',--> <!--title: 'Item ID'--> <!--}, {--> <!--field: 'name',--> <!--title: 'Item Name'--> <!--}, {--> <!--field: 'price',--> <!--title: 'Item Price'--> <!--}],--> <!--data: [{--> <!--id: 1,--> <!--name: 'Item 1',--> <!--price: '$1'--> <!--}, {--> <!--id: 2,--> <!--name: 'Item 2',--> <!--price: '$2'--> <!--}]--> <!--});--> </script> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic -->
<meta charset="UTF-8" />
<title>Dashboard | Nadhif - Responsive Admin Template</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<script src="bootstrap-table-zh-CN.js"></script>
</head>
<body>
<table id="table"></table>
<script>
$('#table').bootstrapTable({
url: 'data1.json',
queryParams:"queryParams",
toolbar:"#toolbar",
sidePagination:"true",
search:"true",
showRefresh:"true",
showToggle:"true",
showColumns:"true",
pageSize:"5",
columns: [{
field: 'id',
title: 'Item ID'
}, {
field: 'name',
title: 'Item Name'
}, {
field: 'price',
title: 'Item Price'
}, ]
});
<!--$('#table').bootstrapTable({-->
<!--columns: [{-->
<!--field: 'id',-->
<!--title: 'Item ID'-->
<!--}, {-->
<!--field: 'name',-->
<!--title: 'Item Name'-->
<!--}, {-->
<!--field: 'price',-->
<!--title: 'Item Price'-->
<!--}],-->
<!--data: [{-->
<!--id: 1,-->
<!--name: 'Item 1',-->
<!--price: '$1'-->
<!--}, {-->
<!--id: 2,-->
<!--name: 'Item 2',-->
<!--price: '$2'-->
<!--}]-->
<!--});-->
</script>
</body>
</html>
数据源
[
{
"id": 0,
"name": "Item 0",
"price": "$0"
},
{
"id": 1,
"name": "Item 1",
"price": "$1"
},
{
"id": 2,
"name": "Item 2",
"price": "$2"
},
{
"id": 3,
"name": "Item 3",
"price": "$3"
},
{
"id": 4,
"name": "Item 4",
"price": "$4"
},
{
"id": 5,
"name": "Item 5",
"price": "$5"
},
{
"id": 6,
"name": "Item 6",
"price": "$6"
},
{
"id": 7,
"name": "Item 7",
"price": "$7"
},
{
"id": 8,
"name": "Item 8",
"price": "$8"
},
{
"id": 9,
"name": "Item 9",
"price": "$9"
},
{
"id": 10,
"name": "Item 10",
"price": "$10"
},
{
"id": 11,
"name": "Item 11",
"price": "$11"
},
{
"id": 12,
"name": "Item 12",
"price": "$12"
},
{
"id": 13,
"name": "Item 13",
"price": "$13"
},
{
"id": 14,
"name": "Item 14",
"price": "$14"
},
{
"id": 15,
"name": "Item 15",
"price": "$15"
},
{
"id": 16,
"name": "Item 16",
"price": "$16"
},
{
"id": 17,
"name": "Item 17",
"price": "$17"
},
{
"id": 18,
"name": "Item 18",
"price": "$18"
},
{
"id": 19,
"name": "Item 19",
"price": "$19"
},
{
"id": 20,
"name": "Item 20",
"price": "$20"
}
]