bootstrap-table+Thinkphp实现server分页
界面需要:此处不提供文件下载,请自行到官网下载。
<link href="./css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" type="text/css" /> <script src="./js/bootstrap.min.js" type="text/javascript"></script> <script src="./js/plugins/bootstrap-table/bootstrap-table.min.js" type="text/javascript"></script> <script src="./js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
前端html代码:
<table id="table"></table>
前端JavaScript:代码
$('#table').bootstrapTable({
url: "./infolist", //请求地址
method: 'GET', //请求
striped: true,
cache: false,
pagination: true,
sortable: true,
showHeader : true,
showRefresh: true,
clickToSelect: true,
search: false,
sidePagination: "server", //客户端client 服务端server
pageNumber: 1,
pageList: [10, 15],
queryParams: function (params) {
return {
offset: params.offset, //页码
limit: params.limit, //页面大小
};
},
columns: [{
field: 'id',
title: '应用ID',
width: '10%',
}, {
field: 'name',
title: '应用名称',
}, {
field: 'type',
title: '类型',
width: '10%',
}, {
field: 'status',
title: '状态',
width: '10%',
}, {
field: 'xznum',
title: '下载量',
width: '10%',
}, {
field: 'phnum',
title: '排序号',
width: '10%',
}],
});
后端Thinkphp处理:
$limit = trim(I('get.limit')); $offset = trim(I('get.offset')); $page = floor($offset / $limit) + 1; # 获取并且计算 页号 分页大小 $list = M('table')->where(['id'=>1])->page($page,$limit)->select(); # 查询相关数据 $count = M('table')->where(['id'=>1])->count(); # 查询数据条数 $ret = [ 'total' => $list, 'rows' => $count, ]; # 构造返回数据类型 $this->ajaxReturn($ret); # 返回JSON数据

浙公网安备 33010602011771号