bootstrap-table插件，分页

时间 2020-12-21

分页效果怎么实现？

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: '世代'
    }]
})

页面效果

怎么做分页呢？