jquery-easyui分页组件的用法
项目进行到迭代二的开发和测试阶段，发现一个比较隐藏的bug，那就是分页组件的使用不当问题。
问题现象：
多页面新增数据后，点击下一页数据显示没有问题，但是当前页，总页数的计算出了问题。
原因分析：
show data后，没有重新加载分页控件导致，因为totalRecords是重新计算出来的。
解决方案及代码：
show data后重新加载分页控件。代码如下：
1，页面初始化
1 $(document).ready(function(){ 2 //初始化分页组件 3 var total=${total}; 4 if(total == "0"){ 5 var loadingMeg = "<tr class='support_white'><td colspan='12' height='20' align='center'><bean:message key='supportrecover.webduty.nodata'/></td></tr>"; 6 $("#dataTbody").html(loadingMeg); 7 } 8 ajaxPagination(total); 9 });
2，加载分页组件核心函数
1 function ajaxPagination(totalRecords){ 2 $("#ajaxPagination").pagination({ 3 total: totalRecords, // totalRecord(总记录数) 需要在进入页面时，在action中赋值 4 onSelectPage: function(pageNumber, pageSize){ 5 //分页组件显示加载数据状态 6 $(this).pagination('loading'); 7 //url为请求路径，注意需要带 pageNumber、ajaxPageSize参数。如果有查询参数，拼接上。 8 var form = document.queryForm; 9 form.current_page.value = pageNumber; 10 form.page_size.value = pageSize; 11 var regionSelects = $("#q_region2").val(); 12 var regSelects = $("#q_reg2").val(); 13 var roles = $("#q_role2").val(); 14 var gtacs = $("#q_gtac2").val(); 15 var dutyDateStarts = $("#q_dutyDateStart2").val(); 16 var dutyDateEnds = $("#q_dutyDateEnd2").val(); 17 var productLines = $("#q_productLine2").val(); 18 var productFamilys = $("#q_productFamily2").val(); 19 var products = $("#q_productID2").val(); 20 //地区部为空的时候，把代表处也至空 21 if(regSelects == "null" || regSelects == null) 22 { 23 regSelects = ""; 24 } 25 //产品线为空的时候，把产品族也至空 26 if(productFamilys == "null" || productFamilys == null) 27 { 28 productFamilys = ""; 29 } 30 //地区部为空的时候，把代表处也至空 31 if(productFamilys == "") 32 { 33 products = ""; 34 $("#q_cheakProducts").html(""); 35 } 36 //判断日期控件 37 var q_isSuss = q_vilidate(); 38 if(!q_isSuss) 39 { 40 return; 41 } 42 var loadingMeg = "<tr class='support_white'><td colspan='12'><img width='12' height='12' src='<%=request.getContextPath() %>/images/loading.gif'>loading...</td></tr>"; 43 //清空表格tbody内容 44 $("#dataTbody").empty(); 45 //表格显示加载数据状态 46 $("#dataTbody").html(loadingMeg); 47 $.ajax({ 48 url : "/SupportRecover/pages/webduty/webDuty.do?actionFlag=ajaxGetWebDuty_all", 49 data: 50 { 51 "regionSelect":regionSelects, 52 "regSelect":regSelects, 53 "role":roles, 54 "dutyDateStart":dutyDateStarts, 55 "dutyDateEnd":dutyDateEnds, 56 "productLine":productLines, 57 "productFamily":productFamilys, 58 "product":products, 59 "gtac":gtacs, 60 "current_page":pageNumber, 61 "page_size":pageSize 62 }, 63 type : "POST", 64 dataType : 'json', 65 success: function(data) { 66 showJsonData(data); 67 }, 68 error:function() 69 { 70 forwardToLogin(); 71 } 72 }); 73 $("#ajaxPagination").pagination('loaded'); 74 } 75 }); 76 }
3，数据展现后重新加载分页控件
1 function showJsonData(data){ 2 var totalRecords = 0; 3 var dataStr = ""; 4 if(data != null && data != ""){ 5 var list = data.pageWebDuty.webDutyList; 6 var jsonLst = eval('(' + list + ')'); 7 totalRecords=eval(data.pageWebDuty.totalRecords); 8 //alert(jsonLst.length); 9 if(jsonLst != "" && jsonLst != "undefined"){ 10 for(var i=0;i<jsonLst.length;i++){ 11 var commonName=jsonLst[i].commonName; 12 var dutyRoleName=jsonLst[i].dutyRoleName; 13 var gtacName=jsonLst[i].gtacName; 14 15 var regionName =""; 16 var repName =""; 17 if(nls == "zh") 18 { 19 regionName = jsonLst[i].regionNameCn; 20 repName = jsonLst[i].repNameCn; 21 }else{ 22 regionName = jsonLst[i].regionNameEn; 23 repName = jsonLst[i].repNameEn; 24 } 25 26 var zonedescription=jsonLst[i].zonedescription; 27 var dutyDateStart=jsonLst[i].dutyDateStart; 28 var dutyDateEnd=jsonLst[i].dutyDateEnd; 29 var dutyTimeStart=jsonLst[i].dutyTimeStart; 30 var dutyTimeEnd=jsonLst[i].dutyTimeEnd; 31 32 var productLineName = ""; 33 var productFamilyName = ""; 34 var productName = ""; 35 if(nls == "zh") 36 { 37 productLineName = jsonLst[i].productLineNameCn; 38 productFamilyName = jsonLst[i].productFamilyNameCn; 39 productName = jsonLst[i].productNameCn; 40 }else{ 41 productLineName = jsonLst[i].productLineNameEn; 42 productFamilyName = jsonLst[i].productFamilyNameEn; 43 productName = jsonLst[i].productNameEn; 44 } 45 46 var webDutyId = jsonLst[i].webDutyId; 47 dataStr = dataStr 48 +"<tr id='"+webDutyId+"'>" 49 + "<td class='spt_td_ellipsis' title='"+commonName+"'>"+commonName+" </td>" 50 + "<td class='spt_td_ellipsis' title='"+dutyRoleName+"'>"+dutyRoleName+"</td>" 51 //+ "<td class='spt_td_ellipsis' title='"+gtacName+"'>"+gtacName+"</td>" 52 + "<td class='spt_td_ellipsis' title='"+regionName+"'>"+regionName+"</td>" 53 + "<td class='spt_td_ellipsis' title='"+repName+"'>"+repName+"</td>" 54 + "<td class='spt_td_ellipsis' align='right' title='"+dutyDateStart+"'>"+dutyDateStart+"</td>" 55 + "<td class='spt_td_ellipsis' align='right' title='"+dutyTimeStart+"'>"+dutyTimeStart+"</td>" 56 + "<td class='spt_td_ellipsis' align='right' title='"+dutyDateEnd+"'> "+dutyDateEnd+"</td>" 57 + "<td class='spt_td_ellipsis' align='right' title='"+dutyTimeEnd+"'>"+dutyTimeEnd+"</td>" 58 + "<td class='spt_td_ellipsis' title='"+productLineName+"'>"+productLineName+"</td>" 59 + "<td class='spt_td_ellipsis' title='"+productFamilyName+"'>"+productFamilyName+"</td>" 60 + "<td class='spt_td_ellipsis' title='"+productName+"'>"+productName+"</td>" 61 + "<td align='center'>" 62 + "<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> " 63 + "</td>" 64 +"</tr>"; 65 } 66 } 67 } 68 69 if(totalRecords == 0){ 70 dataStr = "<tr class='support_white'><td colspan='12' height='20' align='center'><bean:message key='supportrecover.webduty.nodata'/></td></tr>"; 71 } 72 $("#dataTbody").html(dataStr); 73 //解决firefox对字符过长...的兼容性问题 74 ffTextOverflow($("#spt_webSchedule_div_result .spt_td_ellipsis")); 75 ajaxPagination(totalRecords); 76 }
总结：pageNumber,pageSize是分页组件根据totalRecords自动计算出来的,不需自己计算。
