在实际项目开发中,通用的分页组件是必不可少的。下面描述的是关于JavaScript版的分页组件。该组件是基于jquery之上开发的。
该组件包括
jquery-1.3.2.min.js; (jquery 核心类库)
jquery.pager.js; (分页组件类库)
PagerDemo.js; (用于js与html分离)
Pager.css ;
PagerDemo.html
运行效果图如下:
图一、运行效果图
具体实现代码:
jquery.pager.js
- (function($) {
- $.fn.pager = function(options) {
- var opts = $.extend({}, $.fn.pager.defaults, options);
- return this.each(function() {
- $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback));
- $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto";});
- });
- };
- function renderpager(pagenumber, pagecount, buttonClickCallback) {
- var $pager = $('<ul class="pages"></ul>');
- $pager.append(renderButton('首页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback));
- var startPoint = 1;
- var endPoint = 9;
- var thpoint="<li class='thpoint'>...</li>";
- if (pagenumber > 4) {
- startPoint = pagenumber - 4;
- endPoint = pagenumber + 4;
- }
- if (endPoint > pagecount) {
- startPoint = pagecount - 8;
- endPoint = pagecount;
- thpoint = "";
- }
- if (startPoint < 1) {
- startPoint = 1;
- }
- for (var page = startPoint; page <= endPoint; page++) {
- var currentButton = $('<li class="page-number">' + (page) + '</li>');
- page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() {
- buttonClickCallback(this.firstChild.data);
- });
- currentButton.appendTo($pager);
- }
- $pager.append(thpoint).append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('末页', pagenumber, pagecount, buttonClickCallback));
- $pager.append("<li class='thpoint' style='margin-top:3px;'>共: "+pagecount+" 页</li>");
- var strgoto = $("<li class='thpoint'>当前<input type='text' value='"+pagenumber+"'maxlength='6' id='gotoval' style='width:20px; height:16px;margin-top:-3px;padding-top:2px;padding-left:10px;'/>页</li>");
- $pager.append(strgoto);
- $pager.append(changepage('go',pagecount,buttonClickCallback));
- return $pager;
- }
- function changepage(buttonLabel,pagecount,buttonClickCallback){
- var $btngoto = $('<li class="pgNext">'+ buttonLabel+'</li>');
- $btngoto.click(function() {
- var gotoval = $('#gotoval').val();
- var patrn = /^[1-9]{1,20}$/;
- if (!patrn.exec(gotoval)){
- alert("请输入非零的正整数!");
- return false;
- }
- var intval = parseInt(gotoval);
- if(intval > pagecount){
- alert("您输入的页面超过总页数 "+pagecount);
- return ;
- }
- buttonClickCallback(intval);
- });
- return $btngoto;
- }
- function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
- var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');
- var destPage = 1;
- switch (buttonLabel) {
- case "首页":
- destPage = 1;
- break;
- case "上一页":
- destPage = pagenumber - 1;
- break;
- case "下一页":
- destPage = pagenumber + 1;
- break;
- case "末页":
- destPage = pagecount;
- break;
- }
- if (buttonLabel == "首页" || buttonLabel == "上一页") {
- pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
- }
- else {
- pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
- }
- return $Button;
- }
- $.fn.pager.defaults = {
- pagenumber: 1,
- pagecount: 1};
- })(jQuery);
PagerDemo.js
- $(document).ready(function() {
- init(1);
- });
- //默认加载
- function init(pagenumber){
- //向服务器发送请求,查询满足条件的记录
- //$.getJSON('',{},function(data){
- //data 为返回json 对象 并包括(pagecount、totalcount)的key-value值;
- var data = {'pagecount':15,'totalcount':150};
- $("#pager").pager({ pagenumber: pagenumber, pagecount:data.pagecount,totalcount:data.totalcount, buttonClickCallback: PageClick});
- //});
- }
- //回调函数
- PageClick = function(pageclickednumber) {
- init(pageclickednumber);
- $("#result").html("Clicked Page " + pageclickednumber);
- }
Pager.css
- /* jquery.page.js css */
- ul.pages {display:block;border:none;text-transform:uppercase;font-size:12px;margin:10px 0 50px;padding:0;}
- ul.pages li {list-style:none;float:left;border:1px solid #b36d41;text-decoration:none;margin:0 5px 0 0;padding:5px;}
- ul.pages li:hover {border:1px solid #afdfe4;background-color:#afdfe4;}
- ul.pages li.pgEmpty {border:1px solid #f0f0f0;color:#d9d6c3;background-color:#f0f0f0;}
- ul.pages li.thpoint {border:none;cursor:auto; color:#000;background-color:#fff;}
- ul.pages li.pgCurrent {padding: 4px 4px;border: 3px double #fff; + border-color: #afdfe4;color:#FFF;font-weight:700;background-color:#afdfe4;}
PagerDemo.html
需要装载容器div
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>jQuery.pager.js Test</title>
- <link href="Pager.css" rel="stylesheet" type="text/css" />
- <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
- <script src="jquery.pager.js" type="text/javascript"></script>
- <script src="PagerDemo.js" type="text/javascript"></script>
- </head>
- <body>
- <h1 id="result">Click the pager below.</h1>
- <div id="pager" ></div>
- </body>
- </html>
end...