bootstrap-table+Thinkphp實現server分頁
阿新 • • 發佈:2018-07-15
rim select spa ota link set 代碼 this tex
界面需要:此處不提供文件下載,請自行到官網下載。
<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數據
bootstrap-table+Thinkphp實現server分頁