jqueryeasyui分页组件的用法

项目进行到迭代二的开发和测试阶段，发现一个比较隐藏的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>&nbsp;&nbsp;"
                +                "</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自动计算出来的,不需自己计算。