jquery.pager.js实现分页效果


Posted in jQuery onJuly 29, 2019

本文实例为大家分享了jquery.pager.js实现分页的具体代码,供大家参考,具体内容如下

1.html

<link href="/stylesheets/Pager.css" rel="stylesheet" type="text/css"/>
 <script src="/javascripts/web/jquery.pager.js" type="text/javascript"></script>


<body>
   <div id="pager">
    <div id="countPage" style="display:none">{{maxPage}}</div>
    <div id="title" style="display:none">{{title}}</div>
    <div id="nowPage" style="display:none">{{page}}</div>
   </div>
</body>
<script type="text/javascript">
 var title =jQuery("#title").text() ;
 var pageCount =parseInt(jQuery("#countPage").text()) ;
 var nowPage=parseInt(jQuery("#nowPage").text());
 jQuery(function(){
  $("#pager").pager({ pagenumber: nowPage, pagecount: pageCount, buttonClickCallback: PageClick });//pagenumber:当前页,pagecount:总页数
 });
 PageClick = function(pageclickednumber) {
  $("#pager").pager({
   pagenumber: pageclickednumber, pagecount: pageCount, buttonClickCallback: PageClick
  });
  window.location.href = "/article/search/"+title+"/"+pageclickednumber;
 }
</script>

2.Pager.css

#pager ul.pages{
 display:block;
 border:none;
 text-transform:uppercase;
 font-size:10px;margin:10px 0 50px;padding:0;
}
#pager ul.pages li{
 list-style:none;
 float:left;
 border:1px solid #ccc;
 text-decoration:none;
 margin:-20px 5px 0 0;padding:5px;
}
#pager ul.pages li:hover{border:1px solid #003f7e; }
#pager ul.pages li.pgEmpty{
 border:1px solid #eee;
 color:#eee;
}
#pager ul.pages li.pgCurrent{
 border:1px solid #3c90d9;
 color: #fff;
 font-weight:700;
 /*background-color:#eee;*/
 background: #3c90d9 none repeat scroll 0 0;
}
#pager{margin-left: 290px;}

3.jquery.pager.js

/*
 * 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.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(pagenumber, pagecount, buttonClickCallback) {

  // setup $pager to hold render
  var $pager = $('<ul class="pages"></ul>');

  // add in the previous and next buttons
  //$pager.append(renderButton('first', pagenumber, pagecount, buttonClickCallback)).append(renderButton('prev', pagenumber, pagecount, buttonClickCallback));
  $pager.append(renderButton('上一页', 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 = 9;
  var endPoint = 5;
  if (pagenumber > 4 && pagenumber<pagecount-1) {
   startPoint = pagenumber - 2;
   endPoint = pagenumber + 2;
  }
  if(pagenumber>pagecount-2&& pagenumber<pagecount+1){
   startPoint = pagecount - 4;
   endPoint = pagecount;
  }
  if (endPoint > pagecount) {
   startPoint = pagecount - 8;
   endPoint = pagecount;
  }

  if (startPoint < 1) {
   startPoint = 1;
  }

  // loop thru visible pages and render buttons
  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);
  }

  // render in the next and last buttons before returning the whole rendered control back.
  //$pager.append(renderButton('next', pagenumber, pagecount, buttonClickCallback)).append(renderButton('last', pagenumber, pagecount, buttonClickCallback));
  $pager.append(renderButton('下一页', pagenumber, pagecount, buttonClickCallback));
  return $pager;
 }

 // renders and returns a 'specialized' button, ie 'next', 'previous' etc. rather than a page number button
 function renderButton(buttonLabel, pagenumber, pagecount, buttonClickCallback) {

  var $Button = $('<li class="pgNext">' + buttonLabel + '</li>');

  var destPage = 1;

  // work out destination page for required button type
  switch (buttonLabel) {
   case "first":
    destPage = 1;
    break;
   case "上一页":
    destPage = pagenumber - 1;
    break;
   case "下一页":
    destPage = pagenumber + 1;
    break;
   case "last":
    destPage = pagecount;
    break;
  }

  // disable and 'grey' out buttons if not needed.
  if (buttonLabel == "first" || buttonLabel == "上一页") {
   pagenumber <= 1 ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
  }
  else {
   pagenumber >= pagecount ? $Button.addClass('pgEmpty') : $Button.click(function() { buttonClickCallback(destPage); });
  }

  return $Button;
 }

 // pager defaults. hardly worth bothering with in this case but used as placeholder for expansion in the next version
 $.fn.pager.defaults = {
  pagenumber: 1,
  pagecount: 1
 };

})(jQuery);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
JavaScript使用链式方法封装jQuery中CSS()方法示例
Apr 07 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery Dom元素操作技巧
Feb 04 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
jQuery实现日历效果
Sep 11 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 #jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 #jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 #jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 #jQuery
jquery插件开发模式实例详解
Jul 20 #jQuery
jquery实现下载图片功能
Jul 18 #jQuery
jQuery实现图片下载代码
Jul 18 #jQuery
You might like
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
《Re:从零开始的异世界生活 冰结之绊》
2020/04/09 日漫
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php批量添加数据与批量更新数据的实现方法
2014/12/16 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
javascript 硬盘序列号+其它硬件信息
2008/12/23 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
给before和after伪元素设置js效果的方法
2015/12/04 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
jquery ajax结合thinkphp的getjson实现跨域的方法
2016/06/06 Javascript
jQuery中 $ 符号的冲突问题及解决方案
2016/11/04 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
Vue服务器渲染Nuxt学习笔记
2018/01/31 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
python 判断网络连通的实现方法
2018/04/22 Python
python pandas修改列属性的方法详解
2018/06/09 Python
Django重置migrations文件的方法步骤
2019/05/01 Python
python多进程读图提取特征存npy
2019/05/21 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
Python-split()函数实例用法讲解
2020/12/18 Python
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Canvas 帧动画吃苹果小游戏
2020/08/05 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
以下的初始化有什么区别
2013/12/16 面试题
医院工作检讨书范文
2014/02/10 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
纪念九一八事变演讲稿:牢记九一八,屈辱怎能忘
2014/09/14 职场文书
报到证办理个人委托书
2014/10/06 职场文书
2016党校学习心得体会
2016/01/07 职场文书
php字符串倒叙
2021/04/01 PHP
mysql优化
2021/04/06 MySQL
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android