利用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="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="40">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 + 1;
    index = params.data.offset + 1;
    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",1);
    initCatalogTable(code);
    $("#tenantCatalogTablediv").dialog({
        title : name+"xxx",
        width : "900",
        'class' : "mydialog",
        onClose : function() {
            $(this).dialog("close");
        }
        ,buttons : {
            "关闭" : function() {
                $(this).dialog("close");
            }
        }
    });
}

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

<div style="display: none;">
    <div style=" 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);
        }
    });
}

待续......