bootstrap table表格插件之服務(wù)器端分頁(yè)的示例分析

這篇文章主要為大家展示了“bootstrap table表格插件之服務(wù)器端分頁(yè)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap table表格插件之服務(wù)器端分頁(yè)的示例分析”這篇文章吧。

Bootstrap Table是基于Bootstrap的輕量級(jí)表格插件，只需要簡(jiǎn)單的配置就可以實(shí)現(xiàn)強(qiáng)大的支持固定表頭、單復(fù)選、排序、分頁(yè)、搜索以及自定義表頭等功能。

 因公司的項(xiàng)目需要實(shí)現(xiàn)用戶(hù)管理的表格實(shí)現(xiàn)，所以選用了bootstrap-table用于動(dòng)態(tài)獲取后臺(tái)的用戶(hù)數(shù)據(jù)顯示到前臺(tái)。

 示例截圖：

客戶(hù)端代碼：

 //引入的css文件 
<link href="../public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
<link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="external nofollow" rel="stylesheet">
//引入的js文件
 <script src="../public/static/js/jquery.min.js"></script>
 <script src="../public/static/js/bootstrap.min.js"></script>
 <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
 <script src="../public/static/js/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>

html文件代碼

<div class="panel panel-default">
 <div class="panel-heading">
  查詢(xún)條件
 </div>
 <div class="panel-body form-group" >
  <label class="col-sm-1 control-label" >姓名：</label>
  <div class="col-sm-2">
   <input type="text" class="form-control" name="Name" id="search_name"/>
  </div>
  <label class="col-sm-1 control-label" >手機(jī)號(hào)：</label>
  <div class="col-sm-2">
   <input type="text" class="form-control" name="Name" id="search_tel"/>
  </div>
  <div class="col-sm-1 col-sm-offset-4">
   <button class="btn btn-primary" id="search_btn">查詢(xún)</button>
  </div>
  </div>
</div>
<table id="mytab" class="table table-hover"></table>
<div id="toolbar" class="btn-group pull-right" >
  <button id="btn_edit" type="button" class="btn btn-default" >
   <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
  </button>
  <button id="btn_delete" type="button" class="btn btn-default" >
   <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除
  </button>
  <button id="btn_add" type="button" class="btn btn-default">
   <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  </button>
 </div>

js文件代碼：

//根據(jù)窗口調(diào)整表格高度
 $(window).resize(function() {
  $('#mytab').bootstrapTable('resetView', {
   height: tableHeight()
  })
 })
//生成用戶(hù)數(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',//查詢(xún)參數(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 '<i class="fa fa-lock" ></i>'
  }else if(value==1){
   return '<i class="fa fa-unlock" ></i>'
  }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()
  }
 }
  //查詢(xún)按鈕事件
 $('#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)擊查詢(xú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)擊查詢(xún)按鈕時(shí)

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

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