jquery ajax 调用kkpager插件 异步加载重新生成分页后,点击页数还是跟首次加载一样
2017-01-11 16:48
726 查看
kkpager的用法网上有很多,可以百度的到。
但是在调用动态数据的时候发现两个问题
1.Ajax数据变化但是页码不变的问题,方法来自网上
2.按查询条件重新生成数据和分页,点击分页事件后totalpage 和totalrecord 和没加条件查询的数据一样。
主要原因是因为客户端不会帮你保留总页码数和总条数,
在使用kkpager插件的页面,放两个hidden标签。
然后在按查询条件重新生成数据时,用hidden按钮绑定你的总页数和总条数。
下面是ajax 调用后台数据,把返回的总页数和总条数存放在hidden。
后面的是修改kkpager.js
主要就是把里面的
改成
但是在调用动态数据的时候发现两个问题
1.Ajax数据变化但是页码不变的问题,方法来自网上
2.按查询条件重新生成数据和分页,点击分页事件后totalpage 和totalrecord 和没加条件查询的数据一样。
主要原因是因为客户端不会帮你保留总页码数和总条数,
在使用kkpager插件的页面,放两个hidden标签。
然后在按查询条件重新生成数据时,用hidden按钮绑定你的总页数和总条数。
下面是ajax 调用后台数据,把返回的总页数和总条数存放在hidden。
$.ajax({ type: "get", dataType: "json", url: urlStr2, success: totalOnsuccess }); //根据返回的total 加载数据和分页 function totalOnsuccess(data) { var resInfoArray = eval(data); totalRecords = resInfoArray[0].TOTAL; totalPage = Math.ceil(totalRecords / pageSize); //向上取整 $("#totalpages").val(totalPage); //绑定获取的总页数 $("#totalRecords").val(totalRecords);//绑定获取的总条数 if (!pageNo) { pageNo = 1; } if (totalRecords > 0) { FkeepPage(pageNo, totalPage, totalRecords); //调用分页插件 } else { $("#kkpager").html("<div style='text-align:center'>没有符合条件的数据</div>") } queryInfoTable(tablename, pageSize, pageNo, where); //加载表格数据 }
/* pageNo:当前页 totalPage:总页数 totalRecords:总条数 */ function FkeepPage(pageNo, totalPage, totalRecords) { //生成分页 //有些参数是可选的,比如lang,若不传有默认值 kkpager.generPageHtml({ pno: pageNo, //总页码 total: totalPage, //总数据条数 totalRecords: totalRecords, mode: 'click',//默认值是link,可选link或者click click: function (n) { // do something // this.selectPage(n); //默认的,因为不能符合我的要求改成下面的 this.selectPage(n, $("#totalpages").val(), $("#totalRecords").val());
queryInfoTable(tablename, pageSize, n, where); //加载表格数据 return false; } /* ,lang : { firstPageText : '首页', firstPageTipText : '首页', lastPageText : '尾页', lastPageTipText : '尾页', prePageText : '上一页', prePageTipText : '上一页', nextPageText : '下一页', nextPageTipText : '下一页', totalPageBeforeText : '共', totalPageAfterText : '页', currPageBeforeText : '当前第', currPageAfterText : '页', totalInfoSplitStr : '/', totalRecordsBeforeText : '共', totalRecordsAfterText : '条数据', gopageBeforeText : ' 转到', gopageButtonOkText : '确定', gopageAfterText : '页', buttonTipBeforeText : '第', buttonTipAfterText : '页' }*/ },true);//加true 默认没有,因为页码数不更新,所以加上了 }
后面的是修改kkpager.js
主要就是把里面的
//不刷新页面直接手动调用选中某一页码 selectPage: function (n) { this.generPageHtml(this._config,true); },
改成
//不刷新页面直接手动调用选中某一页码 selectPage: function (n, b, c) { this._config['pno'] = n; this._config['total'] = b; this._config['totalRecords'] = c; this.generPageHtml(this._config,true); },
相关文章推荐
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
- Xcode升级导致插件无法使用和点击skip bundle后怎么重新加载插件
- 自制Javascript分页插件,支持AJAX加载和URL带参跳转两种初始化方式,可用于同一页面的多个分页和不同页面的调用
- ListView,实现滚动分页效果。实现异步加载URL生成的图片。使得屏幕不卡
- 默认加载数据分页,点击分页后再次异步数据
- 使用jOrgChart插件, 异步加载生成组织架构图
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
- Xcode升级导致插件无法使用和点击skip bundle后怎么重新加载插件
- jquery.dataTables 按条件查询后重新生成表格 点击排序还是原来的数据问题
- Jquery前端分页插件pagination同步加载和异步加载
- ListView,实现滚动分页效果。实现异步加载URL生成的图片。使得屏幕不卡
- jQuery Ajax 实现分页 kkpager插件实例代码
- jQuery ajax 实现分页 kkpager插件
- 使用jOrgChart插件, 异步加载生成组织架构图
- 玩转Web之easyui(二)-----easy ui 异步加载生成树节点(Tree),点击树生成tab(选项卡)
- ios 关于 通过加载 xib 生成的view,调用 addsubviews,sub view的按钮 不相应点击事件的 问题
- 关于Jquery Ajax 在IE中异步调用失败的解决办法
- extjs2.x gridpanel的数据重新加载后分页事件的一点问题
- 动态调用WEBSERVICE,减少改WS就要重新生成代理类
- android listview分页异步加载图片及图片缓存