jquery.pager.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. /*
  2. * jQuery pager plugin
  3. * Version 1.0 (12/22/2008)
  4. * @requires jQuery v1.2.6 or later
  5. *
  6. * Example at: http://jonpauldavies.github.com/JQuery/Pager/PagerDemo.html
  7. *
  8. * Copyright (c) 2008-2009 Jon Paul Davies
  9. * Dual licensed under the MIT and GPL licenses:
  10. * http://www.opensource.org/licenses/mit-license.php
  11. * http://www.gnu.org/licenses/gpl.html
  12. *
  13. * Read the related blog post and contact the author at http://www.j-dee.com/2008/12/22/jquery-pager-plugin/
  14. *
  15. * This version is far from perfect and doesn't manage it's own state, therefore contributions are more than welcome!
  16. *
  17. * Usage: .pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PagerClickTest });
  18. *
  19. * Where pagenumber is the visible page number
  20. * pagecount is the total number of pages to display
  21. * buttonClickCallback is the method to fire when a pager button is clicked.
  22. * showcount is the total number of viewable pages
  23. *
  24. * buttonClickCallback signiture is PagerClickTest = function(pageclickednumber)
  25. * Where pageclickednumber is the number of the page clicked in the control.
  26. *
  27. * The included Pager.CSS file is a dependancy but can obviously tweaked to your wishes
  28. * Tested in IE6 IE7 Firefox & Safari. Any browser strangeness, please report.
  29. */
  30. (function($) {
  31. $.fn.pager = function(options) {
  32. var opts = $.extend({}, $.fn.pager.defaults, options);
  33. return this.each(function() {
  34. // empty out the destination element and then render out the pager with the supplied options
  35. $(this).empty().append(renderpager(parseInt(options.pagenumber), parseInt(options.pagecount), parseInt(options.showcount), options.buttonClickCallback));
  36. // specify correct cursor activity
  37. $('.pages li').mouseover(function() { document.body.style.cursor = "pointer"; }).mouseout(function() { document.body.style.cursor = "auto"; });
  38. });
  39. };
  40. // render and return the pager with the supplied options
  41. function renderpager(pagenumber, pagecount, showcount, buttonClickCallback) {
  42. // setup $pager to hold render
  43. var $pager = $('<ul class="pages"></ul>');
  44. // add in the previous and next buttons
  45. $pager.append(renderButton('|<', pagenumber, pagecount, buttonClickCallback)).append(renderButton('<', pagenumber, pagecount, buttonClickCallback));
  46. // pager currently only handles 10 viewable pages ( could be easily parameterized, maybe in next version ) so handle edge cases
  47. var startPoint = 1;
  48. var endPoint = showcount;
  49. var mid = (showcount - 1) / 2;
  50. if (pagenumber > mid) {
  51. startPoint = pagenumber - mid;
  52. endPoint = pagenumber + mid;
  53. }
  54. if (endPoint > pagecount) {
  55. startPoint = pagecount - (showcount - 1);
  56. endPoint = pagecount;
  57. }
  58. if (startPoint < 1) {
  59. startPoint = 1;
  60. }
  61. // loop thru visible pages and render buttons
  62. for (var page = startPoint; page <= endPoint; page++) {
  63. var currentButton = $('<li class="page-number"><a href="###">' + (page) + '</a></li>');
  64. page == pagenumber ? currentButton.addClass('active') : currentButton.click(function() { buttonClickCallback(this.firstChild.firstChild.data); });
  65. currentButton.appendTo($pager);
  66. }
  67. // render in the next and last buttons before returning the whole rendered control back.
  68. $pager.append(renderButton('>', pagenumber, pagecount, buttonClickCallback)).append(renderButton('>|', pagenumber, pagecount, buttonClickCallback));
  69. return $pager;
  70. }
  71. // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
  72. function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {
  73. var $Button = $('<li class="pgNext"><a href="###">' + buttonLabel + '</a></li>');
  74. var destPage = 1;
  75. // work out destination page for required button type
  76. switch (buttonLabel) {
  77. case "|<":
  78. destPage = 1;
  79. break;
  80. case "<":
  81. destPage = pagenumber - 1;
  82. break;
  83. case ">":
  84. destPage = pagenumber + 1;
  85. break;
  86. case ">|":
  87. destPage = pagecount;
  88. break;
  89. }
  90. // disable and 'grey' out buttons if not needed.
  91. if (buttonLabel == "|<" || buttonLabel == "<") {
  92. pagenumber <= 1 ? $Button.addClass('disabled') : $Button.click(function() { buttonClickCallback(destPage); });
  93. }
  94. else {
  95. pagenumber >= pagecount ? $Button.addClass('disabled') : $Button.click(function() { buttonClickCallback(destPage); });
  96. }
  97. return $Button;
  98. }
  99. // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
  100. $.fn.pager.defaults = {
  101. pagenumber: 1,
  102. pagecount: 1,
  103. showcount: 9
  104. };
  105. })(jQuery);