利用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="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="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);
        }
    });
}

 

待續......