使用时只需要给它传一个数据的总数, 还可以再传每页大小和当前页码, 然后重写onclick方法, 获取翻页事件, 可用来向服务器端发起AJAX请求。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <title>js分页控件pagerview分享_武鸣人</title> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 14px; font-family: tahoma, arial; background: #fff; } .PagerView{ color: #333; text-align: center; margin: 8px; } .PagerView span{ color: #999; margin: 0 1px; padding: 3px 6px; border: 1px solid #ccc; } .PagerView span.on{ color: #333; font-weight: bold; border: 1px solid #333; } .PagerView a{ color: #00f; text-decoration: none; } .PagerView a span{ border: 1px solid #66c; color: #33f; } .PagerView a:hover span{ color: #f00; background: #ff9; } </style> <script type="text/javascript"> <!-- /** * 开源代码, 有兴趣的可以免费使用. * * 分页控件, 使用原生的JavaScript代码编写. 重写onclick方法, 获取翻页事件, * 可用来向服务器端发起AJAX请求. * * 示例: * HTML: * <div id="pager"></div> * * JavaScript: * var pager = new PagerView('pager'); * pager.index = 3; // 当前是第3页 * pager.size = 16; // 每页显示16条记录 * pager.itemCount = 100; // 一共有100条记录 * * pager.onclick = function(index){ * alert('click on page: ' + index); * // display data... * pager.render(); * }; * * pager.render(); * * @param id: HTML节点的id属性值, 控件将显示在该节点中. 可以延迟到render方法调用之前设置. *///武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) function PagerView(id){ var self = this; this.id = id; this.container = null; this.index = 1; // 当前页码, 从1开始 this.size = 15; // 每页显示记录数 this.maxButtons = 9; // 显示的分页按钮数量 this.itemCount = 0; // 记录总数 this.pageCount = 0; // 总页数 /** * 控件使用者重写本方法, 获取翻页事件, 可用来向服务器端发起AJAX请求. * @param index: 被点击的页码. */ this.onclick = function(index){ }; /** * 内部方法. */ this._onclick = function(index){ self.index = index; self.onclick(index); self.render(); }; /** * 在显示之前计算各种页码变量的值. */ this.calculate = function(){ self.pageCount = parseInt(Math.ceil(self.itemCount / self.size)); self.index = parseInt(self.index); if(self.index > self.pageCount){ self.index = self.pageCount; } }; /** * 渲染分页控件. */ this.render = function(){ if(self.id != undefined){ var div = document.getElementById(self.id); div.view = self; self.container = div; } self.calculate(); var start, end; start = Math.max(1, self.index - parseInt(self.maxButtons/2)); end = Math.min(self.pageCount, start + self.maxButtons - 1); start = Math.max(1, end - self.maxButtons + 1); var str = ""; str += "<div class=\"PagerView\">\n"; if(self.pageCount > 1){ if(self.index != 1){ str += '<a href="javascript://1"><span>|<</span></a>'; str += '<a href="javascript://' + (self.index-1) + '"><span><<</span></a>'; }else{ str += '<span>|<</span>'; str += '<span><<</span>'; } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) for(var i=start; i<=end; i++){ if(i == this.index){ str += '<span class="on">' + i + "</span>"; }else{ str += '<a href="javascript://' + i + '"><span>' + i + "</span></a>"; } } if(self.pageCount > 1){ if(self.index != self.pageCount){ str += '<a href="javascript://' + (self.index+1) + '"><span>>></span></a>'; str += '<a href="javascript://' + self.pageCount + '"><span>>|</span></a>'; }else{ str += '<span>>></span>'; str += '<span>>|</span>'; } }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) str += ' 一共' + self.pageCount + '页, ' + self.itemCount + '条记录 '; str += "</div><!-- /.pagerView -->\n"; self.container.innerHTML = str; var a_list = self.container.getElementsByTagName('a'); for(var i=0; i<a_list.length; i++){ a_list[i].onclick = function(){ var index = this.getAttribute('href'); if(index != undefined && index != ''){ index = parseInt(index.replace('javascript://', '')); self._onclick(index) } return false; }; } }; }//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) //--> </script> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <h1>分页控件PagerView示例</h1> <div id="pager" style="width: 900px; margin: 20px; padding: 4px; border: 1px solid #999;"> </div> <div id="info" style="text-align: center; width: 900px; margin: 0 20px; padding: 4px; border: 1px solid #999;"> </div> <div style="text-align: center; width: 900px; margin: 0 20px; padding: 4px;"> <a href="https://www.wuming.ren/">www.wuming.ren</a> </div> <script type="text/javascript"> <!-- var pager = new PagerView('pager'); pager.itemCount = 301; pager.size = 5; pager.index = 3; pager.onclick = function(index){ document.getElementById('info').innerHTML = '现在翻到第' + index + '页'; if(index == 12){ if(confirm('现在是12页, 要弹出一个窗口?')){ url = 'https://www.wuming.ren'; window.open(url); } } };//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) pager.render(); //--> </script> </body> </html>
本文来自武鸣人网站,转载请注明出处