利用BootStrap Table插件实现自己的弹出框分页。

参考链接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)" οnclick="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 }

 

待续......