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数据