Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，经过简单的设置，就能够拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。 http://bootstrap-table.wenzhixin.net.cn/zh-cn/javascript
使用：css
1.引入须要的JS和CSSjava
1 <link rel="stylesheet" href="${basePath}/css/bootstrap..css"> 2 <link rel="stylesheet" href="${basePath}/css/bootstrap-table/bootstrap-table.css"> 3 4 <script src="${basePath}/js/jquery.min.js"></script> 5 <script src="${basePath}/js/bootstrap.min.js"></script> 6 <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script> 7 <script src="${basePath}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script> 8 <script src="${basePath}/js/plugins/bootstrap-table/bootstrap-table-export.js"></script> 9 <script src="${basePath}/js/plugins/bootstrap-table/tableExport.js"></script>
②.定义一个空的tablejquery
1 <body> 2 <div class="row base-margin" id="query"> 3 <ol class="breadcrumb"> 4 <li><strong><span style="color: #27a0d7">用户列表</span></strong></li> 5 </ol> 6 <form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm"> 7 <div class="form-group"> 8 <label for="orgCode">部门:</label> 9 <select class="form-control" id="orgCode" name="orgCode"> 10 <option value="">默认选择</option> 11 <c:forEach var="data" items="${orgList}"> 12 <option value="${data.orgCode }">${data.orgName }</option> 13 </c:forEach> 14 </select> 15 </div> 16 <div class="form-group"> 17 <label for="userName">名称:</label> 18 <input type="text" class="form-control" name="userName" id="userName" placeholder="请输入名称"> 19 </div> 20 <div class="form-group"> 21 <label >日期:</label> 22 <input placeholder="开始日期" class="form-control layer-date" id="startDate" name="startDate"> 23 <input placeholder="结束日期" class="form-control layer-date" id="endDate" name="endDate"> 24 </div> 25 <div class="form-group"> 26 <button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询</button> 27 </div> 28 <div class="form-group btn-right"> 29 <button type="button" class="btn btn-primary" id="addBtn" onclick="addUser();">新增用户</button> 30 </div> 31 </form> 32 </div> 33 <div class="container" style="width: 100%"> 34 <table id="demo-table"> 35 </table> 36 </div> 37 </body>
③.初始化table表格（建议把初始化的JS代码写到另外的自定义js页面中，代码还挺长的），具体的各个参数能够查看API。json
1 <script type="text/javascript"> 2 $(function () { 3 initTable(); 4 initDate(); 5 }); 6 7 function doQuery(params){ 8 $('#demo-table').bootstrapTable('refresh'); //刷新表格 9 } 10 11 function initTable(){ 12 var url = "user.do?method=listUsers&random="+Math.random(); 13 $('#demo-table').bootstrapTable({ 14 method:'POST', 15 dataType:'json', 16 contentType: "application/x-www-form-urlencoded", 17 cache: false, 18 striped: true, //是否显示行间隔色 19 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） 20 url:url, 21 height: $(window).height() - 110, 22 width:$(window).width(), 23 showColumns:true, 24 pagination:true, 25 queryParams : queryParams, 26 minimumCountColumns:2, 27 pageNumber:1, //初始化加载第一页，默认第一页 28 pageSize: 20, //每页的记录行数（*） 29 pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） 30 uniqueId: "id", //每一行的惟一标识，通常为主键列 31 showExport: true, 32 exportDataType: 'all', 33 responseHandler: responseHandler, 34 columns: [ 35 { 36 field: '', 37 title: 'Sort No.', 38 formatter: function (value, row, index) { 39 return index+1; 40 } 41 }, 42 { 43 field : 'id', 44 title : 'User ID', 45 align : 'center', 46 valign : 'middle', 47 sortable : true 48 }, { 49 field : 'institutionCode', 50 title : 'Institution Code', 51 align : 'center', 52 valign : 'middle', 53 sortable : true 54 }, { 55 field : 'institutionName', 56 title : 'Institution Name', 57 align : 'center', 58 valign : 'middle' 59 }, { 60 field : 'loginId', 61 title : 'Login Name', 62 align : 'center', 63 valign : 'middle', 64 sortable : true 65 }, { 66 field : 'realName', 67 title : 'Real Name', 68 align : 'center', 69 valign : 'middle' 70 }, { 71 field : 'createTime', 72 title : 'Create Time', 73 align : 'center', 74 valign : 'left', 75 formatter : function (value, row, index){ 76 return new Date(value).format('yyyy-MM-dd hh:mm:ss'); 77 } 78 }, { 79 field : 'homeAddress', 80 title : 'Address', 81 align : 'center', 82 valign : 'middle' 83 }] 84 }); 85 } 86 87 function initDate(){ 88 var start = { 89 elem: '#startDate', 90 format: 'YYYY-MM-DD hh:mm:ss', 91 min: laydate.now(-7), 92 max: laydate.now(), 93 istime: true, 94 istoday: false, 95 choose: function (datas) { 96 end.min = datas; //开始日选好后，重置结束日的最小日期 97 end.start = datas //将结束日的初始值设定为开始日 98 } 99 }; 100 var end = { 101 elem: '#endDate', 102 format: 'YYYY-MM-DD hh:mm:ss', 103 min: laydate.now(-7), 104 max: laydate.now(), 105 istime: true, //是否开启时间选择 106 isclear: true, //是否显示清空 107 istoday: true, //是否显示今天 108 issure: true, //是否显示确认 109 choose: function (datas) { 110 start.max = datas; //结束日选好后，重置开始日的最大日期 111 } 112 }; 113 laydate(start); 114 laydate(end); 115 } 116 117 function queryParams(params) { 118 var param = { 119 orgCode : $("#orgCode").val(), 120 userName : $("#userName").val(), 121 startDate : $("#startDate").val(), 122 endDate : $("#endDate").val(), 123 limit : this.limit, // 页面大小 124 offset : this.offset, // 页码 125 pageindex : this.pageNumber, 126 pageSize : this.pageSize 127 } 128 return param; 129 } 130 131 // 用于server 分页，表格数据量太大的话 不想一次查询全部数据，可使用server分页查询，数据量小的话能够直接把sidePagination: "server" 改成 sidePagination: "client" ，同时去掉responseHandler: responseHandler就能够了， 132 function responseHandler(res) { 133 if (res) { 134 return { 135 "rows" : res.result, 136 "total" : res.totalCount 137 }; 138 } else { 139 return { 140 "rows" : [], 141 "total" : 0 142 }; 143 } 144 } 145 </script>
Bootdteap中文文档http://v3.bootcss.com/getting-started/#downloadbootstrap