bootstraptable表格插件之服務(wù)器端分頁的示例分析

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

創(chuàng)新互聯(lián)公司長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為杜集企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、做網(wǎng)站，杜集網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

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

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

 示例截圖：

客戶端代碼：

 //引入的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">
  查詢條件
 </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ī)號：</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">查詢</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()
  })
 })
//生成用戶數(shù)據(jù)
 $('#mytab').bootstrapTable({
  method: 'post',
  contentType: "application/x-www-form-urlencoded",//必須要有?。。?！
  url:"../index.php/admin/index/userManagement",//要請求數(shù)據(jù)的文件路徑
  height:tableHeight(),//高度調(diào)整
  toolbar: '#toolbar',//指定工具欄
  striped: true, //是否顯示行間隔色
  dataField: "res",//bootstrap table 可以前端分頁也可以后端分頁，這里
  //我們使用的是后端分頁，后端分頁時需返回含有total：總記錄數(shù),這個鍵值好像是固定的 
  //rows： 記錄集合 鍵值可以修改 dataField 自己定義成自己想要的就好
  pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁
  pagination:true,//是否分頁
  queryParamsType:'limit',//查詢參數(shù)組織方式
  queryParams:queryParams,//請求服務(wù)器時所傳的參數(shù)
  sidePagination:'server',//指定服務(wù)器端分頁
  pageSize:10,//單頁記錄數(shù)
  pageList:[5,10,20,30],//分頁步進(jìn)值
  showRefresh:true,//刷新按鈕
  showColumns:true,
  clickToSelect: true,//是否啟用點擊選中行
  toolbarAlign:'right',工具欄對齊方式
  buttonsAlign:'right',//按鈕對齊方式
  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ī)號',
    field:'Tel',
   },
   {
    title:'郵箱',
    field:'Email'
   },
   {
    title:'注冊日期',
    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;
  }
 })
 //三個參數(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ù)錯誤'
  }
 }
 //請求服務(wù)數(shù)據(jù)時所傳參數(shù)
 function queryParams(params){
  return{
   //每頁多少條數(shù)據(jù)
   pageSize: params.limit,
   //請求第幾頁
   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ù)自己頁面情況進(jìn)行調(diào)整
  return $(window).height() -280;
 }

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

后臺傳來的數(shù)據(jù)

只勾選一項，可以修改刪除

勾選多項只能刪除

開發(fā)過程中遇到的問題 （分頁后重新搜素問題）

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

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

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

因為感覺太過麻煩，所以找了很久終于找到了簡單的解決方法

 再點擊查詢按鈕時

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

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

本文題目：bootstraptable表格插件之服務(wù)器端分頁的示例分析
文章路徑：http://muchs.cn/article8/ijdhip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、微信公眾號、網(wǎng)站營銷、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)