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 +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 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自动计算出来的,不需自己计算。