bootstrap-table下載地址：https://github.com/wenzhixin/bootstrap-table/
先來看一張效果圖：
下載下來后，需要導入的css：由于需要bootstrap的支持，所以需要導入bootstrap的css
<!-- Bootstrap --> <link href="${contextPath }/static/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="${contextPath }/static/bootstrap/table/bootstrap-table.css" rel="external nofollow" rel="stylesheet"> 需要導入的js：除了bootstrap的js跟table的js外第一個要導入的就是jQuery的js，他們都是基于jQuery開發的
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="${contextPath }/static/jquery/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="${contextPath }/static/bootstrap/js/bootstrap.min.js"></script> <script src="${contextPath }/static/bootstrap/table/bootstrap-table.js"></script> <script src="${contextPath }/static/bootstrap/table/locale/bootstrap-table-zh-CN.js"></script> bootstrap-table-zh-CN.js這個js是用來漢化table的提示文字的，在下載下來的bootstrap-table文件夾下的locale文件夾中有很多的語言包支持
完啦，我們只需要在html頁面中聲明一個table跟菜單div(如果不需要，可以不聲明)就好：
<div class="container-fluid"> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <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_info" type="button" class="btn btn-default"> <span class="fa fa-info" aria-hidden="true"></span>詳情 </button> </div> <table id="table_sysUser"></table> </div>
table_sysUser就是我們要顯示的table列表啦。
我們來看看js怎么來請求后臺的數據，并進行分頁跟查詢：
//項目根目錄 var path = $("#contextPath").val(); $(document).ready(function() { //初始化Table var oTable = new TableInit(); oTable.Init(); //初始化頁面上面的按鈕事件 $("#btn_add").click(function(){ //新增 }); $("#btn_edit").click(function(){ //編輯 }); $("#btn_info").click(function(){ //詳情 }); $("#btn_delete").click(function(){ //刪除 }); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#table_sysUser').bootstrapTable({ url: path+'/sysuser/findUser.action', //請求后臺的URL（*） method: 'post', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: true, //是否啟用排序 sortName:"id", sortOrder: "desc", //排序方式 queryParams: oTableInit.queryParams,//傳遞參數（*） queryParamsType: 'limit', sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber:1, //初始化加載第一頁，默認第一頁 pageSize: 15, //每頁的記錄行數（*） pageList: [10, 15, 20, 50], //可供選擇的每頁的行數（*） search: true, //是否顯示表格搜索 strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 //height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度 uniqueId: "id", //每一行的唯一標識，一般為主鍵列 showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 contentType: "application/x-www-form-urlencoded", //解決POST提交問題 columns: [ {checkbox: true }, {title:'用戶名稱',field: 'userName',sortable:true }, {title:'手機號碼',field: 'phone',sortable:true, formatter:function(v,r,i){ if(v){ return v.substring(0,3)+"****"+v.substring(7,4); } return v; } }, {title:'郵箱賬號',field: 'email',sortable:true }, {title:'生日',field: 'birthday',sortable:true }, {title:'部門',field: 'departmentKey',sortable:true, formatter:function(v,r,i){ if(r.departmentValue){ return r.departmentValue; } return ""; } }, {title:'最后登錄時間',field: 'lastLogintime',sortable:true }, {title:'性別',field: 'sex',sortable:true, formatter:function(v,r,i){ switch (Number(v)) { case 1: return "男"; break; case 2: return "女"; break; default: return "未知"; break; } } }, {title:'用戶狀態',field: 'status',sortable:true, formatter:function(v,r,i){ return r.statusCn == "false"?"啟用":"禁用"; } }, {title:'所屬公司編號',field: 'companyId',sortable:true }, {title:'注冊時間',field: 'createTime',sortable:true }, {title:'用戶頭像',field: 'userhead',sortable:true }, {title:'職位',field: 'positionKey',sortable:true}, {title:'角色',field:'role'}] }); }; //得到查詢的參數 oTableInit.queryParams = function (params) { var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 pageSize: params.limit, //頁面大小 <span style="white-space:pre"> </span>pageNumber: params.pageNumber, //頁碼 <span style="white-space:pre"> </span>sortName: params.sort,<span style="white-space:pre"> </span>//排序列名 <span style="white-space:pre"> </span>sortOrder:params.order,<span style="white-space:pre"> </span>//排序方式 <span style="white-space:pre"> </span>searchText:params.search<span style="white-space:pre"> </span>//搜索框參數 }; return temp; }; return oTableInit; }; 很多參數在代碼注釋里面說得很明顯啦，我們來說說怎么新增查詢參數，我們只需要在queryParams方法里面在新增參數信息就行：
oTableInit.queryParams = function (params) { var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 pageSize: params.limit, //頁面大小 pageNumber: params.pageNumber, //頁碼 sortName: params.sort, //排序列名 sortOrder:params.order, //排序方式 searchText:params.search, //搜索框參數 searchText:params.search, //搜索框參數 }; return temp; }; bootstrap-table獲取頁面上勾選的數據：
var rowData = $("#table_sysUser").bootstrapTable("getSelections");bootstrap-table刷新表格：
$('#table_sysUser').bootstrapTable('refresh'); 新聞熱點
疑難解答
