利用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分页的方式展示出来）。

 <div style="width:100%; padding: 10px;">
     <table id="tablewrap1"
        data-toggle="table"
        data-locale="zh-CN"
        data-ajax="ajaxRequest"
        data-single-select="true"
        data-side-pagination="server"        //服务端分页设置：在配置文件中设置分页方式为服务器分页。 分页方式：client客户端分页，server服务端分页（*）
        data-striped="true"                  //设置为 true 会有隔行变色效果。
        data-pagination="true"               //是否支持分页
        data-pagination-first-text="首页"
        data-pagination-pre-text="上一页"
        data-pagination-next-text="下一页"
        data-pagination-last-text="末页" class="fline-show-when-ready"
        data-show-jumpto="true">
          <thead>
           <tr>
             <th data-field="id" data-formatter="idFormatter" data-width="">xx编号</th>
             <th data-field="name">xx名称</th>
             <th data-field="code">xx性别</th>
             <th data-field="accessType" data-formatter="formatAccessType">xx年龄</th>
             <th data-field="versionTag">xx生日</th>
             <th data-field="updateDate" data-formatter="formatDate">xx时间</th>
             <th data-field="status" data-formatter="formatStatus">xx地址</th>
             <th data-field="operate" data-formatter="opFormatter">xx操作</th>
          </tr>
         </thead>
     </table>
 </div>

2、第二步、先将基本数据信息以table分页展示的出来，使用的ajax将数据查询出来，在上面所示的table展示出来。

 function ajaxRequest(params) {
     var pageSize = params.data.limit;
     var pageNum = params.data.offset/pageSize + ;
     index = params.data.offset + ;
     var sort = params.data.sort? params.data.sort : "id";
     var order = params.data.order? params.data.order : "desc";
     var datas;
     var items;
     $.ajax({
         type:'POST',
         url:'xxxAction!selectStudent.action?pageNum=' + pageNum + '&pageSize=' + pageSize,
         dataType:'json',
         async:true,
         data:$('#searchForm').serialize(),
         error: function(request, textStatus, errorThrown) {
             fxShowAjaxError(request, textStatus, errorThrown);
         },
         success:function(data){
             datas = data.result;
             if(datas != null) {
                 count = datas.count;
             }
             items = datas.items?datas.items:[];
             params.success({
                 total: count,
                 rows: items
             });
             params.complete();
         }
     });
 }

3、第三步、第一步<th data-field="operate" data-formatter="opFormatter">xx操作</th> 可以使用如下的方法，点击xx操作的，然后可以弹出弹出框分页信息。

 function opFormatter(value,row) {
     var tmp="'"+row.code+"'";
     var name="'"+row.name+"'";
     return '<a href="javascript:void(0)" onclick="getxxxDetails('+tmp+","+name+')">点击弹出框分页</a>';
 }

 如下是弹出框的确定和关闭。
 function getxxxDetails(code,name){
     $("#tablewrap2").bootstrapTable("selectPage",);
     initCatalogTable(code);
     $("#tenantCatalogTablediv").dialog({
         title : name+"xxx",
         width : "",
         'class' : "mydialog",
         onClose : function() {
             $(this).dialog("close");
         }
         ,buttons : {
             "关闭" : function() {
                 $(this).dialog("close");
             }
         }
     });
 }

4、第四步、弹出框分页的table如下所示。

 <div style="display: none;">
     <div style="width: 850; padding-top: 8px;" align="left" id="tenantCatalogTablediv" >
         <table id="tablewrap2"
                data-toggle="table"
                data-locale="zh-CN"
                data-single-select="true"
                data-click-to-select="false"
                data-side-pagination="client" //服务端分页设置：在配置文件中设置分页方式为服务器分页。 分页方式：client客户端分页，server服务端分页（*）
                data-striped="true"
                data-pagination="true"
                data-pagination-first-text="首页"
                data-pagination-pre-text="上一页"
                data-pagination-next-text="下一页"
                data-pagination-last-text="末页"
                >
             <thead>
                 <tr>
                     <th data-field="url" data-formatter="paramsMatter">xx地址</th>
                     <th data-field="resultCode" >xx姓名</th>
                     <th data-field="resultMsg" data-formatter="paramsResultMsgr">xx性别</th>
                     <th data-field="createTime" data-formatter="formatDate">xx年龄</th>
                 </tr>
             </thead>
         </table>
     </div>
 </div>

5、第五步、第四步弹出框分页的table使用如下ajax加载出数据。进行Bootstrap Table 数据绑定。

 function initCatalogTable(code){
     $.ajax({
         type : "POST",
         url : 'xxxAction!selectTeacher.action',
         data : {'code' : code},
         async : false,
         error : function(request, textStatus,errorThrown) {
             fxShowAjaxError(request, textStatus,errorThrown);
         },
         success : function(data) {
             data=data.result;
             if(data==null){
                 $("#tablewrap2").bootstrapTable('load', []);
                 return;
             }
             $('#tablewrap2').bootstrapTable('load', data);
         }
     });
 }

待续......