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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
解决jQuery使用append添加的元素事件无效的问题
Aug 30 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 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
Apache2 httpd.conf 中文版
2006/12/06 PHP
php MySQL与分页效率
2008/06/04 PHP
CodeIgniter框架中_remap()使用方法2例
2014/03/10 PHP
php设计模式之策略模式应用案例详解
2019/06/17 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
JQuery 引发两次$(document.ready)事件
2010/01/15 Javascript
子窗口、父窗口和Silverlight之间的相互调用
2010/08/16 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
js实现的简练高效拖拽功能示例
2016/12/21 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
python发送伪造的arp请求
2014/01/09 Python
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
跟老齐学Python之集合的关系
2014/09/24 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
Sony C++笔试题
2013/03/10 面试题
优秀员工获奖感言
2014/03/01 职场文书
高中军训感言800字
2014/03/05 职场文书
软件项目开发计划书
2014/05/01 职场文书
预备党员综合考察材料
2014/05/31 职场文书
刑事代理授权委托书
2014/09/17 职场文书
2016春节家属慰问信
2015/03/25 职场文书
员工工作表扬信
2015/05/05 职场文书
大学开学感言
2015/08/01 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python