利用BootStrap 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>

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();
}
});
}

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

<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>

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);
}
});
}