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 相关文章推荐
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 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
php利用ob_start()清除输出和选择性输出的方法
2018/01/18 PHP
JavaScript 动态生成方法的例子
2009/07/22 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
2017/07/05 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue webpack打包后图片路径错误的完美解决方法
2018/12/07 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
Vue 实现从小到大的横向滑动效果详解
2019/10/16 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
21行Python代码实现拼写检查器
2016/01/25 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python多线程与多进程及其区别详解
2019/08/08 Python
python列表切片和嵌套列表取值操作详解
2020/02/27 Python
python中怎么表示空值
2020/06/19 Python
python安装sklearn模块的方法详解
2020/11/28 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
军训自我鉴定
2014/01/22 职场文书
军训考核自我鉴定
2014/02/13 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
旅游节目策划方案
2014/05/26 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
纪念建国70周年演讲稿
2019/07/19 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL