1. 程式人生 > >bootstrap-table+Thinkphp實現server分頁

bootstrap-table+Thinkphp實現server分頁

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分頁