bootstrap table表格插件之服務(wù)器端分頁實例代碼

2019-11-19 12:57:57

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

Bootstrap Table是基于Bootstrap的輕量級表格插件，只需要簡單的配置就可以實現(xiàn)強大的支持固定表頭、單復(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" style="margin-bottom:0px;">  <label class="col-sm-1 control-label" style="text-align: right; margin-top:5px">姓名：</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" style="text-align: right; margin-top:5px">手機號：</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" style="margin-right: 20px;">  <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">   <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改  </button>  <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">   <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],//分頁步進值  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:'手機號',    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" style="color:red"></i>'  }else if(value==1){   return '<i class="fa fa-unlock" style="color:green"></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ù)自己頁面情況進行調(diào)整  return $(window).height() -280; }

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

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