js文件代碼：

//根據(jù)窗口調(diào)整表格高度
 $(window).resize(function() {
  $('#mytab').bootstrapTable('resetView', {
   height: tableHeight()
  })
 })
//生成用戶數(shù)據(jù)
 $('#mytab').bootstrapTable({
  method: 'post',
  contentType: "application/x-www-form-urlencoded",//必須要有?。。?！
  url:"../index.php/admin/index/userManagement",//要請(qǐng)求數(shù)據(jù)的文件路徑
  height:tableHeight(),//高度調(diào)整
  toolbar: '#toolbar',//指定工具欄
  striped: true, //是否顯示行間隔色
  dataField: "res",//bootstrap table 可以前端分頁(yè)也可以后端分頁(yè)，這里
  //我們使用的是后端分頁(yè)，后端分頁(yè)時(shí)需返回含有total：總記錄數(shù),這個(gè)鍵值好像是固定的 
  //rows： 記錄集合 鍵值可以修改 dataField 自己定義成自己想要的就好
  pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
  pagination:true,//是否分頁(yè)
  queryParamsType:'limit',//查詢參數(shù)組織方式
  queryParams:queryParams,//請(qǐng)求服務(wù)器時(shí)所傳的參數(shù)
  sidePagination:'server',//指定服務(wù)器端分頁(yè)
  pageSize:10,//單頁(yè)記錄數(shù)
  pageList:[5,10,20,30],//分頁(yè)步進(jìn)值
  showRefresh:true,//刷新按鈕
  showColumns:true,
  clickToSelect: true,//是否啟用點(diǎn)擊選中行
  toolbarAlign:'right',工具欄對(duì)齊方式
  buttonsAlign:'right',//按鈕對(duì)齊方式
  toolbar:'#toolbar',//指定工作欄
  columns:[
   {
    title:'全選',
    field:'select',
    //復(fù)選框
    checkbox:true,
    width:25,
    align:'center',
    valign:'middle'
   },
   {
    title:'ID',
    field:'ID',
    visible:false
   },
   {
    title:'登錄名',
    field:'LoginName',
    sortable:true
   },
   {
    title:'姓名',
    field:'Name',
    sortable:true
   },
   {
    title:'手機(jī)號(hào)',
    field:'Tel',
   },
   {
    title:'郵箱',
    field:'Email'
   },
   {
    title:'注冊(cè)日期',
    field:'CreateTime',
    sortable:true
   },
   {
    title:'狀態(tài)',
    field:'Attribute',
    align:'center',
    //列數(shù)據(jù)格式化
    formatter:operateFormatter
   }
  ],
  locale:'zh-CN',//中文支持,
  responseHandler:function(res){
   //在ajax獲取到數(shù)據(jù)，渲染表格之前，修改數(shù)據(jù)源
   return res;
  }
 })
 //三個(gè)參數(shù)，value代表該列的值
 function operateFormatter(value,row,index){
  if(value==2){
   return ''
  }else if(value==1){
   return ''
  }else{
   return '數(shù)據(jù)錯(cuò)誤'
  }
 }
 //請(qǐng)求服務(wù)數(shù)據(jù)時(shí)所傳參數(shù)
 function queryParams(params){
  return{
   //每頁(yè)多少條數(shù)據(jù)
   pageSize: params.limit,
   //請(qǐng)求第幾頁(yè)
   pageIndex:params.pageNumber,
   Name:$('#search_name').val(),
   Tel:$('#search_tel').val()
  }
 }
  //查詢按鈕事件
 $('#search_btn').click(function(){
  $('#mytab').bootstrapTable('refresh', {url: '../index.php/admin/index/userManagement'});
 })
 //tableHeight函數(shù)
 function tableHeight(){
  //可以根據(jù)自己頁(yè)面情況進(jìn)行調(diào)整
  return $(window).height() -280;
 }

傳入后臺(tái)的數(shù)據(jù)：

后臺(tái)傳來(lái)的數(shù)據(jù)

只勾選一項(xiàng)，可以修改刪除

勾選多項(xiàng)只能刪除

開(kāi)發(fā)過(guò)程中遇到的問(wèn)題 （分頁(yè)后重新搜素問(wèn)題）

 如果點(diǎn)擊到第二頁(yè)，我再搜索框中輸入搜索條件，點(diǎn)擊查詢按鈕，調(diào)用bootstrap table refresh()方法，pageIndex會(huì)從第二頁(yè)開(kāi)始，應(yīng)該改為第一頁(yè)
 網(wǎng)上大多數(shù)方法為 ：

$(“#mytab”).bootstrapTable(‘destroy');先要將table銷(xiāo)毀，否則會(huì)保留上次加載的內(nèi)容

……//然后重新初使化表格,相當(dāng)于重新創(chuàng)建。

因?yàn)楦杏X(jué)太過(guò)麻煩，所以找了很久終于找到了簡(jiǎn)單的解決方法

 再點(diǎn)擊查詢按鈕時(shí)

$(‘#mytab').bootstrapTable(‘refreshOptions',{pageNumber:1,pageSize:10});//便可以了

以上是“bootstrap table表格插件之服務(wù)器端分頁(yè)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！