bootstrap-table表格插件之服務器端分頁實例

2024-04-27 15:12:41

字體：大中小

來源：轉載

供稿：網友

bootstrap-table表格插件之服務器端分頁實例

Bootstrap Table是基于Bootstrap的輕量級表格插件，只需要簡單的配置就可以實現強大的支持固定表頭、單復選、排序、分頁、搜索以及自定義表頭等功能。因公司的項目需要實現用戶管理的表格實現，所以選用了bootstrap-table用于動態獲取后臺的用戶數據顯示到前臺。示例截圖：這里寫圖片描述

客戶端代碼：

//引入的CSS文件 <link href="../public/static/css/bootstrap.min.css" rel="stylesheet" /><link href="../public/static/css/plugins/bootstrap-table/bootstrap-table.min.css" 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-application/x-www-form-urlencoded",//必須要有！！！！ url:"../index.php/admin/index/userManagement",//要請求數據的文件路徑 height:tableHeight(),//高度調整 toolbar: '#toolbar',//指定工具欄 striped: true, //是否顯示行間隔色 dataField: "res",// pageNumber: 1, //初始化加載第一頁，默認第一頁 pagination:true,//是否分頁 queryParamsType:'limit',//查詢參數組織方式 queryParams:queryParams,//請求服務器時所傳的參數 sidePagination:'server',//指定服務器端分頁 pageSize:10,//單頁記錄數 pageList:[5,10,20,30],//分頁步進值 showRefresh:true,//刷新按鈕 showColumns:true, clickToSelect: true,//是否啟用點擊選中行 toolbarAlign:'right',工具欄對齊方式 buttonsAlign:'right',//按鈕對齊方式 toolbar:'#toolbar',//指定工作欄 columns:[ { title:'全選', field:'select', //復選框 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:'狀態', field:'Attribute', align:'center', //列數據格式化 formatter:OperateFormatter } ], locale:'zh-CN',//中文支持 }) //三個參數，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 '數據錯誤' } } //請求服務數據時所傳參數 function queryParams(params){ return{ //每頁多少條數據 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'}); })

傳入后臺的數據：