分页效果怎么实现?
html 部分
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>bootstrap-table</title>
<link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-table-master/dist/bootstrap-table.min.css" />
</head>
<body>
<table id='table' class='table table-bordered table-hover table-striped' data-sort-stable='true'>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>12</td>
<td>张三</td>
<td>5</td>
<td>1602103</td>
<td>语文</td>
<td>女</td>
</tr>
<tr>
<td></td>
<td>85</td>
<td>李四</td>
<td>5</td>
<td>1602103</td>
<td>数学</td>
<td>男</td>
</tr>
</tbody>
</table>
<script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<script src='bootstrap-3.3.7/dist/js/bootstrap.min.js'></script>
<script src='bootstrap-table-master/dist/bootstrap-table.min.js'></script>
<script src="bootstrap-table-master/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src='js/new_file.js'></script>
</body>
</html>
js 部分
$('#table').bootstrapTable({
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100,'All'], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
// showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 700, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "no", //每一行的唯一标识,一般为主键列
showToggle: true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
// queryParams : function(params) {
// var temp = {
// limit : params.limit,
// offset : params.offset,
// Name : $('#search_name').val(),
// Tel : $('#search_tel').val()
// };
// return temp;
// },
columns: [{
checkbox: true,
align: "center",
visible: true //是否显示复选框
},{
title: 'Number',//标题 可不加
sortable: true,
formatter: function (value, row, index) {
return index+1;
}
},{
field: 'cn_name',
title: '中文名'
},{
field: 'jp_name',
title: '日文名'
},{
field: 'en_name',
title: '英文名'
},{
field: 'nature',
title: '属性'
},{
field: 'generation',
title: '世代'
}]
})
页面效果
怎么做分页呢?