jquery-easyui分页组件的用法

项目进行到迭代二的开发和测试阶段，发现一个比较隐藏的bug，那就是分页组件的使用不当问题。

问题现象：

多页面新增数据后，点击下一页数据显示没有问题，但是当前页，总页数的计算出了问题。

原因分析：

show data后，没有重新加载分页控件导致，因为totalRecords是重新计算出来的。

解决方案及代码：

show data后重新加载分页控件。代码如下：

1，页面初始化

$(document).ready(function(){
//初始化分页组件
var total=${total};
if(total == "0"){
var loadingMeg = "<tr class='support_white'><td colspan='12' height='20' align='center'><bean:message key='supportrecover.webduty.nodata'/></td></tr>";
$("#dataTbody").html(loadingMeg);
}
ajaxPagination(total);
});

2，加载分页组件核心函数

function ajaxPagination(totalRecords){
$("#ajaxPagination").pagination({
total: totalRecords,    // totalRecord(总记录数) 需要在进入页面时，在action中赋值
onSelectPage: function(pageNumber, pageSize){
//分页组件显示加载数据状态
$(this).pagination('loading');
//url为请求路径，注意需要带 pageNumber、ajaxPageSize参数。如果有查询参数，拼接上。
var form = document.queryForm;
form.current_page.value = pageNumber;
form.page_size.value = pageSize;
var regionSelects = $("#q_region2").val();
var regSelects = $("#q_reg2").val();
var roles = $("#q_role2").val();
var gtacs = $("#q_gtac2").val();
var dutyDateStarts = $("#q_dutyDateStart2").val();
var dutyDateEnds = $("#q_dutyDateEnd2").val();
var productLines = $("#q_productLine2").val();
var productFamilys = $("#q_productFamily2").val();
var products = $("#q_productID2").val();
//地区部为空的时候，把代表处也至空
if(regSelects == "null" || regSelects == null)
{
regSelects = "";
}
//产品线为空的时候，把产品族也至空
if(productFamilys == "null" || productFamilys == null)
{
productFamilys = "";
}
//地区部为空的时候，把代表处也至空
if(productFamilys == "")
{
products = "";
$("#q_cheakProducts").html("");
}
//判断日期控件
var q_isSuss = q_vilidate();
if(!q_isSuss)
{
return;
}
var loadingMeg = "<tr class='support_white'><td colspan='12'><img width='12' height='12' src='<%=request.getContextPath() %>/images/loading.gif'>loading...</td></tr>";
//清空表格tbody内容
$("#dataTbody").empty();
//表格显示加载数据状态
$("#dataTbody").html(loadingMeg);
$.ajax({
url : "/SupportRecover/pages/webduty/webDuty.do?actionFlag=ajaxGetWebDuty_all",
data:
{
"regionSelect":regionSelects,
"regSelect":regSelects,
"role":roles,
"dutyDateStart":dutyDateStarts,
"dutyDateEnd":dutyDateEnds,
"productLine":productLines,
"productFamily":productFamilys,
"product":products,
"gtac":gtacs,
"current_page":pageNumber,
"page_size":pageSize
},
type : "POST",
dataType : 'json',
success: function(data) {
showJsonData(data);
},
error:function()
{
forwardToLogin();
}
});
$("#ajaxPagination").pagination('loaded');
}
});
}

3，数据展现后重新加载分页控件

function showJsonData(data){
var totalRecords = 0;
var dataStr = "";
if(data != null && data != ""){
var list = data.pageWebDuty.webDutyList;
var jsonLst = eval('(' + list + ')');
totalRecords=eval(data.pageWebDuty.totalRecords);
//alert(jsonLst.length);
if(jsonLst != "" && jsonLst != "undefined"){
for(var i=0;i<jsonLst.length;i++){
var commonName=jsonLst[i].commonName;
var dutyRoleName=jsonLst[i].dutyRoleName;
var gtacName=jsonLst[i].gtacName;

var regionName ="";
var repName ="";
if(nls == "zh")
{
regionName = jsonLst[i].regionNameCn;
repName = jsonLst[i].repNameCn;
}else{
regionName = jsonLst[i].regionNameEn;
repName = jsonLst[i].repNameEn;
}

var zonedescription=jsonLst[i].zonedescription;
var dutyDateStart=jsonLst[i].dutyDateStart;
var dutyDateEnd=jsonLst[i].dutyDateEnd;
var dutyTimeStart=jsonLst[i].dutyTimeStart;
var dutyTimeEnd=jsonLst[i].dutyTimeEnd;

var productLineName = "";
var productFamilyName = "";
var productName = "";
if(nls == "zh")
{
productLineName = jsonLst[i].productLineNameCn;
productFamilyName = jsonLst[i].productFamilyNameCn;
productName = jsonLst[i].productNameCn;
}else{
productLineName = jsonLst[i].productLineNameEn;
productFamilyName = jsonLst[i].productFamilyNameEn;
productName = jsonLst[i].productNameEn;
}

var webDutyId = jsonLst[i].webDutyId;
dataStr = dataStr
+"<tr id='"+webDutyId+"'>"
+                "<td class='spt_td_ellipsis' title='"+commonName+"'>"+commonName+" </td>"
+                "<td class='spt_td_ellipsis' title='"+dutyRoleName+"'>"+dutyRoleName+"</td>"
//+                "<td class='spt_td_ellipsis' title='"+gtacName+"'>"+gtacName+"</td>"
+                "<td class='spt_td_ellipsis' title='"+regionName+"'>"+regionName+"</td>"
+                "<td class='spt_td_ellipsis' title='"+repName+"'>"+repName+"</td>"
+                "<td class='spt_td_ellipsis' align='right' title='"+dutyDateStart+"'>"+dutyDateStart+"</td>"
+                "<td class='spt_td_ellipsis' align='right' title='"+dutyTimeStart+"'>"+dutyTimeStart+"</td>"
+                "<td class='spt_td_ellipsis' align='right' title='"+dutyDateEnd+"'> "+dutyDateEnd+"</td>"
+                "<td class='spt_td_ellipsis' align='right' title='"+dutyTimeEnd+"'>"+dutyTimeEnd+"</td>"
+                "<td class='spt_td_ellipsis' title='"+productLineName+"'>"+productLineName+"</td>"
+                "<td class='spt_td_ellipsis' title='"+productFamilyName+"'>"+productFamilyName+"</td>"
+                "<td class='spt_td_ellipsis' title='"+productName+"'>"+productName+"</td>"
+                "<td align='center'>"
+                "<span style='cursor:pointer;' onClick='showWebDuty01("+'"'+webDutyId +'"'+");'><img src='<%=request.getContextPath() %>/images/View_file_icon.png' class='spt_webSchedule_img' title='<bean:message key='supportrecover.webduty.queryimg'/>'/></span>  "
+                "</td>"
+"</tr>";
}
}
}

if(totalRecords == 0){
dataStr = "<tr class='support_white'><td colspan='12' height='20' align='center'><bean:message key='supportrecover.webduty.nodata'/></td></tr>";
}
$("#dataTbody").html(dataStr);
//解决firefox对字符过长...的兼容性问题
ffTextOverflow($("#spt_webSchedule_div_result .spt_td_ellipsis"));
      ajaxPagination(totalRecords);
 }

总结：pageNumber,pageSize是分页组件根据totalRecords自动计算出来的,不需自己计算。