JQPAGINATION分页插件实践
来源：互联网 发布：云端软件 知乎 编辑：程序博客网 时间：2024/05/21 07:57
JQPAGINATION分页插件参考资料：http://blog.csdn.net/chinet_bridge/article/details/12488719
献上实用代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <link rel="stylesheet" href="./css/jqpagination.css" /> <script src="./js/jquery-1.7.2.min.js"></script> <script src="./js/jquery.jqpagination.js"></script> <script id="myTemp" type="text/html"> <li>名称：{Name}，用户名：{LoginID}</li> </script></head><body> <ul id="myRecord"> </ul> <div class="gigantic pagination"> <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous" data-action="previous">‹</a> <input type="text" readonly="readonly" /> <a href="#" class="next" data-action="next">›</a> <a href="#" class="last" data-action="last">»</a> </div> <div class="clearfix"> </div></body></html><script type="text/javascript" language="javascript"> var MPAGE = 0; var SIZE = 2; function rpt(p) { $.ajaxSettings.async = false; $.getJSON('./lib/company.json').done(function (data) { if (p == 1) { MPAGE =Math.ceil(data.total/SIZE); } $('#myRecord').html(''); var start = (p - 1) * SIZE; var end = Math.min(p * SIZE, data.total); for (var i = start, j = end; i < j; i++) { var item = data.rows[i]; var tmp = $('#myTemp').html(); tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; }); $('#myRecord').append(tmp); } }); $.ajaxSettings.async = true; } rpt(1); $('.pagination').jqPagination({ link_string: '/?page={page_number}', max_page: MPAGE, paged: function (page) { rpt(page); } });</script>如果是用ajax,读取总记录数和数据内容最好分开两个ajax. 像上面那样只用一个ajax，就要将异步改成同步,因为总记录数要在分页功能初始化之前生成数据。要是显示数据内容单独做成一个ajax，这个ajax则可以保持异步。说到这里还是感觉繁琐。笔者想到另外一套思路。可以先将数据转js数组。看代码：<!DOCTYPE html><head> <link rel="stylesheet" href="./css/jqpagination.css" /> <script src="./js/jquery-1.7.2.min.js"></script> <script src="./js/jquery.jqpagination.js"></script> <script id="myTemp" type="text/html"> <li>名称：{Name}，用户名：{LoginID}</li> </script></head><body> <ul id="myRecord"> </ul> <div class="gigantic pagination"> <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous" data-action="previous">‹</a> <input type="text" readonly="readonly" /> <a href="#" class="next" data-action="next">›</a> <a href="#" class="last" data-action="last">»</a> </div> <div class="clearfix"> </div></body></html><script type="text/javascript" language="javascript"> var ROWS = [{ "Name": "上海陆地信息公司", "LoginID": "yu" }, { "Name": "上海陆空电子信息公司", "LoginID": "tianya" }, { "Name": "上海中草药有限公司", "LoginID": "yutian" }, { "Name": "上海眉飞色舞娱乐有限公司", "LoginID": "tianya21" }, { "Name": "天天饮食股份有限公司", "LoginID": "tiantian" }, { "Name": "上海陆空电脑培训中心", "LoginID": "tiantianjian" }, { "Name": "碧海蓝天餐饮娱乐有限公司", "LoginID": "bihai" }, { "Name": "天天发笔记本公司", "LoginID": "tiantianfa" }, { "Name": "集运通信科技有限公司", "LoginID": "jiyun" }, { "Name": "东方红太阳能有限公司", "LoginID": "dongfanghong" }, { "Name": "上海有线传媒有限公司", "LoginID": "youxian" }, { "Name": "HP笔记本生产公司", "LoginID": "hp" }, { "Name": "上海空中楼阁设计有限公司", "LoginID": "kongzhong" }, { "Name": "上海海鸥科技博览馆", "LoginID": "haiou" }, { "Name": "上海千珂企业形像策划制作有限公司", "LoginID": "qianke" }, { "Name": "上海可喜可乐有限公司", "LoginID": "kexkl" }, { "Name": "天使婴儿用品有限公司", "LoginID": "tianshi" }, { "Name": "安妮2测试有限公司", "LoginID": "annee" }, { "Name": "中石信息技术有限公司", "LoginID": "airong"}]; var SIZE = 2; var MPAGE = Math.ceil(ROWS.length/SIZE); function rpt(p) { $('#myRecord').html(''); var start = (p - 1) * SIZE; var end = Math.min(p * SIZE, ROWS.length); for (var i = start, j = end; i < j; i++) { var item = ROWS[i]; var tmp = $('#myTemp').html(); tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; }); $('#myRecord').append(tmp); } } rpt(1); $('.pagination').jqPagination({ link_string: '/?page={page_number}', max_page: MPAGE, paged: function (page) { rpt(page); } });</script>如果需要支持url分页，代码示例：
<!DOCTYPE html><head> <link rel="stylesheet" href="./css/jqpagination.css" /> <script src="./js/jquery-1.7.2.min.js"></script> <script src="./js/jquery.jqpagination.js"></script> <script id="myTemp" type="text/html"> <li>名称：{Name}，用户名：{LoginID}</li> </script></head><body> <ul id="myRecord"> </ul> <div class="gigantic pagination"> <a href="#" class="first" data-action="first">«</a> <a href="#" class="previous" data-action="previous">‹</a> <input type="text" readonly="readonly" /> <a href="#" class="next" data-action="next">›</a> <a href="#" class="last" data-action="last">»</a> </div> <div class="clearfix"> </div></body></html><script type="text/javascript" language="javascript" > var ROWS = [{ "Name": "上海陆地信息公司", "LoginID": "yu" }, { "Name": "上海陆空电子信息公司", "LoginID": "tianya" }, { "Name": "上海中草药有限公司", "LoginID": "yutian" }, { "Name": "上海眉飞色舞娱乐有限公司", "LoginID": "tianya21" }, { "Name": "天天饮食股份有限公司", "LoginID": "tiantian" }, { "Name": "上海陆空电脑培训中心", "LoginID": "tiantianjian" }, { "Name": "碧海蓝天餐饮娱乐有限公司", "LoginID": "bihai" }, { "Name": "天天发笔记本公司", "LoginID": "tiantianfa" }, { "Name": "集运通信科技有限公司", "LoginID": "jiyun" }, { "Name": "东方红太阳能有限公司", "LoginID": "dongfanghong" }, { "Name": "上海有线传媒有限公司", "LoginID": "youxian" }, { "Name": "HP笔记本生产公司", "LoginID": "hp" }, { "Name": "上海空中楼阁设计有限公司", "LoginID": "kongzhong" }, { "Name": "上海海鸥科技博览馆", "LoginID": "haiou" }, { "Name": "上海千珂企业形像策划制作有限公司", "LoginID": "qianke" }, { "Name": "上海可喜可乐有限公司", "LoginID": "kexkl" }, { "Name": "天使婴儿用品有限公司", "LoginID": "tianshi" }, { "Name": "安妮2测试有限公司", "LoginID": "annee" }, { "Name": "中石信息技术有限公司", "LoginID": "airong"}]; var SIZE = 2; var MPAGE = Math.ceil(ROWS.length / SIZE); var rpt = function (c) { var href = window.location.href, s = window.location.search, reg = /(&?)page=(\d+)/; if (c!=0) { var char = s == '' ? '?' : '&'; if (reg.test(href)) { href = href.replace(reg, char + 'page=' + c); } else { href += char + 'page=' + c; } window.location.href = href.replace('?&', '?'); } else { var _page = s.match(reg); c = _page ? _page[2] : 1; $('.pagination').jqPagination({ current_page: c, link_string: '', max_page: MPAGE, paged: function (page) { rpt(page); } }); //前端显示数据内容代码开始，此处可用服务端代码代替显示 $('#myRecord').html(''); var start = (c - 1) * SIZE; var end = Math.min(c * SIZE, ROWS.length); for (var i = start, j = end; i < j; i++) { var item = ROWS[i]; var tmp = $('#myTemp').html(); tmp = tmp.replace(/\{(\w+)\}/g, function (source, key) { return item[key]; }); $('#myRecord').append(tmp); } //前端显示数据内容代码开始，此处可用服务端代码代替显示 } } rpt(0);</script> 0 0
- JQPAGINATION分页插件实践
- 个性的分页插件-JQPAGINATION
- 触屏版轻量级分页插件jqPagination分享
- JqPagination动态分页，每次点击下一页都加载一次后台
- jqpagination动态赋值实例
- 分页插件
- 分页插件
- 分页插件
- 分页插件
- 分页插件
- 插件分页
- 分页插件
- 分页插件
- mybatis分页/分页插件
- javascript面向对象编程（实践之无刷新分页插件）
- API分页最佳实践
- bootstrap 分页实践
- mybatis分页插件(物理分页)
- Jsoup解析HTML获取数据
- VS2010项目引用了DLL文件，也写了Using，但是编译时提示:未能找到类型或命名空间名称
- log4j+slf4j迁移到log4j2+slf4j （Servlet3.0）
- 每天一个linux命令（15）：tail 命令
- C语言——文件分类
- JQPAGINATION分页插件实践
- monoslam,scenelib,spcaview
- quick Cocos2d-x lua 八方向摇杆代码实现
- 数据结构之---C语言实现图的十字链表存储表示
- Snail—UI学习之弹出按钮选择项UIActionSheet
- [Cocoa]_[初级]_[NSTableView之自定义NSImageButtonCell]
- JavaScript replaceall 方法
- 聊天工具条
- hdoj1213 How many tables?(并查集)
