/* * jQuery pager plugin * Version 1.0 (12/22/2008) * @requires jQuery v1.2.6 or later * * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html * * Copyright (c) 2008-2009 Jon Paul Davies * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/ * * This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome! * * Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest }); * * Where pagenumber is the visible page number * pagecount is the total number of pages to display * buttonClickCallback is the method to fire when a pager button is clicked. * * buttonClickCallback signiture is PagerClickTest = function(pageclickednumber) * Where pageclickednumber is the number of the page clicked in the control. * * The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes * Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report. */ (function($) { $.fn.pager = function(options) { var opts = $.extend({}, $.fn.pager.defaults, options); return this.each(function() { // empty out the destination element and then render out the pager with the supplied options $(this).empty().append(renderpager(parseInt(options.totalcounts),parseInt(options.pagesize),parseInt(options.pagenumber), parseInt(options.pagecount), options.buttonClickCallback)); // specify correct cursor activity $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; }); }); }; // render and return the pager with the supplied options function renderpager(totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback) { var ispgEmpty = ""; //如果只有一页,就不展示分页菜单,只居中展示共多少条记录 if(pagecount <= 1 || totalcounts == 0){ //ispgEmpty = "pgEmpty"; ispgEmpty = "style='width:160px; margin:0 auto;'"; //$(".pager_container").css("width","150px"); } else if(pagecount ==2 ){ //ispgEmpty = "pgEmpty"; ispgEmpty = "style='width:300px; margin:0 auto;'"; //$(".pager_container").css("width","150px"); }else{ ///$(".pager_container").css("width",""); ispgEmpty = ""; } // setup $pager to hold render //var $pager = $(""); //var $pgHeader = $("

转到

"); var $pager = $(""); var $pgHeader = $("

转到

"); // add in the previous and next buttons $pager.append(renderButton('《', totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback)); // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases var startPoint = 1; var endPoint = 5; if (pagenumber > 2) { startPoint = pagenumber - 2; endPoint = pagenumber + 2; } if (endPoint > pagecount) { startPoint = pagecount - 4; endPoint = pagecount; } if (startPoint < 1) { startPoint = 1; } // loop thru visible pages and render buttons for (var page = startPoint; page <= endPoint; page++) { var currentButton = $('
  • ' + (page) + '
  • '); page == pagenumber ? currentButton.addClass('pgCurrent') : currentButton.click(function() { buttonClickCallback(this.firstChild.data); }); currentButton.appendTo($pager); } // render in the next and last buttons before returning the whole rendered control back. $pager.append(renderButton('下一页', totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback)).append(renderButton('》', totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback)); if($("#pagesize").val()==null){ $pgHeader.append( renderGotoPagenum(pagenumber,ispgEmpty,totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback)) .append(" / 共 "+pagecount +" 页     每页显示 ") .append(""+pagesize+"     共 "+totalcounts+" 条"); }else{ $pgHeader.append( renderGotoPagenum(pagenumber,ispgEmpty,totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback)) .append(" / 共 "+pagecount +" 页     每页显示 ") .append(renderSelectCount( totalcounts,ispgEmpty )) .append("     共 "+totalcounts+" 条"); } return $pgHeader.before($pager); } // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button function renderButton(buttonLabel, totalcounts,pagesize,pagenumber, pagecount, buttonClickCallback) { var $Button = $('
  • ' + buttonLabel + '
  • '); var destPage = 1; // work out destination page for required button type switch (buttonLabel) { case "《": destPage = 1; break; case "上一页": destPage = pagenumber - 1; break; case "下一页": destPage = pagenumber + 1; break; case "》": destPage = pagecount; break; } // disable and 'grey' out buttons if not needed. 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; } //根据输入的input的值,转到某个页面 function renderGotoPagenum(gopagenumber, ispgEmpty, totalcounts, pagesize, pagenumber, pagecount, buttonClickCallback) { var $Input = $(""); $Input.change(function() { var gonum=$('#gopagenum').val(); var num_reg = /^[0-9]*$/; //必须为数字 if(gonum!="" & num_reg.test(gonum)){ gopagenumber = gonum; }else{ $('#gopagenum').css({"color":"#555","font-size":"11px"}); $('#gopagenum').val("输入数字"); return false; } if(gonum <= 1){ gopagenumber = 1; }else if(gonum >= pagecount){ gopagenumber = pagecount; }else{ gopagenumber = gonum; } buttonClickCallback(gopagenumber); }); $Input.focus(function() { $('#gopagenum').val(""); $('#gopagenum').css("color","#f03800"); }); return $Input; } //初始化select的值:每页显示该值的数目列表内容 function renderSelectCount(totalcounts, ispgEmpty) { var $Select = $(''); $Select.empty(); //添加下拉框的option var options = ""; var size = $("#defaultsize").val(); var pagesize=size; var selectval = $("#pagesize").val(); for(var i=2; i<=8; i++) { if(selectval==pagesize){ options += ""; }else{ options += ""; } if( totalcounts < pagesize ){ //如果列表总数小于下拉列表值,其他的option则不显示 pagesize=totalcounts; break; }else{ pagesize=size*(i+1); //这里控制下拉列表的值的大小 } } $Select.append(options); //改变下拉列表的值 $Select.change(function() { selectval = $Select.find("option:selected").val(); $("#pagesize").val(selectval); //控制跳转的页是否存在 var pagenum = $('#gopagenum').val(); if( totalcounts%selectval == 0 ){ pagenum = totalcounts/selectval; }else{ pagenum = parseInt(totalcounts/selectval)+1; } if( $('#pagenumber').val() > pagenum ){ $('#pagenumber').val(pagenum); } init(); }); return $Select; } // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version $.fn.pager.defaults = { totalcounts:1, pagesize:1, pagenumber: 1, pagecount: 1 }; })(jQuery);