版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Biexiansheng/article/details/85132434
参考链接1：
官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/home/
开始使用：http://bootstrap-table.wenzhixin.net.cn/zh-cn/getting-started/
文档：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
参考链接2：https://www.cnblogs.com/wlandwl/p/bootstrap_table.html
1、第一步、首先，先将基本数据信息以table分页展示的出来。（即非弹出框分页的数据，以table分页的方式展示出来）。
1 <div style="width:100%; padding: 10px;"> 2 <table id="tablewrap1" 3 data-toggle="table" 4 data-locale="zh-CN" 5 data-ajax="ajaxRequest" 6 data-single-select="true" 7 data-side-pagination="server" //服务端分页设置：在配置文件中设置分页方式为服务器分页。 分页方式：client客户端分页，server服务端分页（*） 8 data-striped="true" //设置为 true 会有隔行变色效果。 9 data-pagination="true" //是否支持分页 10 data-pagination-first-text="首页" 11 data-pagination-pre-text="上一页" 12 data-pagination-next-text="下一页" 13 data-pagination-last-text="末页" class="fline-show-when-ready" 14 data-show-jumpto="true"> 15 <thead> 16 <tr> 17 <th data-field="id" data-formatter="idFormatter" data-width="40">xx编号</th> 18 <th data-field="name">xx名称</th> 19 <th data-field="code">xx性别</th> 20 <th data-field="accessType" data-formatter="formatAccessType">xx年龄</th> 21 <th data-field="versionTag">xx生日</th> 22 <th data-field="updateDate" data-formatter="formatDate">xx时间</th> 23 <th data-field="status" data-formatter="formatStatus">xx地址</th> 24 <th data-field="operate" data-formatter="opFormatter">xx操作</th> 25 </tr> 26 </thead> 27 </table> 28 </div>
2、第二步、先将基本数据信息以table分页展示的出来，使用的ajax将数据查询出来，在上面所示的table展示出来。
1 function ajaxRequest(params) {
2 var pageSize = params.data.limit;
3 var pageNum = params.data.offset/pageSize + 1;
4 index = params.data.offset + 1;
5 var sort = params.data.sort? params.data.sort : "id";
6 var order = params.data.order? params.data.order : "desc";
7 var datas;
8 var items;
9 $.ajax({
10 type:'POST',
11 url:'xxxAction!selectStudent.action?pageNum=' + pageNum + '&pageSize=' + pageSize,
12 dataType:'json',
13 async:true,
14 data:$('#searchForm').serialize(),
15 error: function(request, textStatus, errorThrown) {
16 fxShowAjaxError(request, textStatus, errorThrown);
17 },
18 success:function(data){
19 datas = data.result;
20 if(datas != null) {
21 count = datas.count;
22 }
23 items = datas.items?datas.items:[];
24 params.success({
25 total: count,
26 rows: items
27 });
28 params.complete();
29 }
30 });
31 }
3、第三步、第一步<th data-field="operate" data-formatter="opFormatter">xx操作</th> 可以使用如下的方法，点击xx操作的，然后可以弹出弹出框分页信息。
1 function opFormatter(value,row) {
2 var tmp="'"+row.code+"'";
3 var name="'"+row.name+"'";
4 return '<a href="javascript:void(0)" onclick="getxxxDetails('+tmp+","+name+')">点击弹出框分页</a>';
5 }
6
7 如下是弹出框的确定和关闭。
8 function getxxxDetails(code,name){
9 $("#tablewrap2").bootstrapTable("selectPage",1);
10 initCatalogTable(code);
11 $("#tenantCatalogTablediv").dialog({
12 title : name+"xxx",
13 width : "900",
14 'class' : "mydialog",
15 onClose : function() {
16 $(this).dialog("close");
17 }
18 ,buttons : {
19 "关闭" : function() {
20 $(this).dialog("close");
21 }
22 }
23 });
24 }
4、第四步、弹出框分页的table如下所示。
1 <div style="display: none;"> 2 <div style="width: 850; padding-top: 8px;" align="left" id="tenantCatalogTablediv" > 3 <table id="tablewrap2" 4 data-toggle="table" 5 data-locale="zh-CN" 6 data-single-select="true" 7 data-click-to-select="false" 8 data-side-pagination="client" //服务端分页设置：在配置文件中设置分页方式为服务器分页。 分页方式：client客户端分页，server服务端分页（*） 9 data-striped="true" 10 data-pagination="true" 11 data-pagination-first-text="首页" 12 data-pagination-pre-text="上一页" 13 data-pagination-next-text="下一页" 14 data-pagination-last-text="末页" 15 > 16 <thead> 17 <tr> 18 <th data-field="url" data-formatter="paramsMatter">xx地址</th> 19 <th data-field="resultCode" >xx姓名</th> 20 <th data-field="resultMsg" data-formatter="paramsResultMsgr">xx性别</th> 21 <th data-field="createTime" data-formatter="formatDate">xx年龄</th> 22 </tr> 23 </thead> 24 </table> 25 </div> 26 </div>
5、第五步、第四步弹出框分页的table使用如下ajax加载出数据。进行Bootstrap Table 数据绑定。
1 function initCatalogTable(code){
2 $.ajax({
3 type : "POST",
4 url : 'xxxAction!selectTeacher.action',
5 data : {'code' : code},
6 async : false,
7 error : function(request, textStatus,errorThrown) {
8 fxShowAjaxError(request, textStatus,errorThrown);
9 },
10 success : function(data) {
11 data=data.result;
12 if(data==null){
13 $("#tablewrap2").bootstrapTable('load', []);
14 return;
15 }
16 $('#tablewrap2').bootstrapTable('load', data);
17 }
18 });
19 }
待续......