jquery.pager.js分页实现详解


Posted in jQuery onJuly 29, 2019

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

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('第一页', pagenumber, pagecount, buttonClickCallback)).append(renderButton('上一页', pagenumber, pagecount, buttonClickCallback)); 
 
 // pager currently only handles 5 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 - 3; 
  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('下一页', pagenumber, pagecount, buttonClickCallback)).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 "第一页": 
  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; 
 } 
 
 // 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);

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:0 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 #003f7e; 
color:#000; 
font-weight:700; 
background-color:#eee; 
}

html代码:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 <title>jQuery.pager.js Test</title> 
 <link href="Pager.css" rel="stylesheet" type="text/css" /> 
 <script src="jquery-1.2.6.js" type="text/javascript"></script> 
 <script src="jquery.pager.js" type="text/javascript"></script> 
 <script type="text/javascript" language="javascript"> 
 
 $(document).ready(function() { 
  $("#pager").pager({ pagenumber: 1, pagecount: 15, buttonClickCallback: PageClick }); 
 }); 
 
 PageClick = function(pageclickednumber) { 
  $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 15, buttonClickCallback: PageClick }); 
  $("#result").html("Clicked Page " + pageclickednumber); 
 } 
  
 </script> 
</head> 
<body> 
<h1 id="result">Click the pager below.</h1> 
<div id="pager" ></div> 
</body> 
</html>

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

jQuery 相关文章推荐
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
jQuery实现腾讯信用界面(自制刻度尺)样式
Aug 15 jQuery
详解webpack3如何正确引用并使用jQuery库
Aug 26 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
jQuery实现表格的增、删、改操作示例
Jan 27 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jquery树形插件zTree高级使用详解
Aug 16 jQuery
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
jquery.pager.js实现分页效果
Jul 29 #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
You might like
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP版国家代码、缩写查询函数代码
2011/08/14 PHP
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP面向对象之事务脚本模式(详解)
2017/06/07 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
php设计模式之模板模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javaScript 关闭浏览器 (不弹出提示框)
2010/01/31 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
JavaScript中的逻辑判断符&amp;&amp;、||与!介绍
2014/12/31 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue用BMap百度地图实现即时搜索功能
2019/09/26 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
python编辑用户登入界面的实现代码
2018/07/16 Python
解决pyinstaller打包发布后的exe文件打开控制台闪退的问题
2019/06/21 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
简述进程的启动、终止的方式以及如何进行进程的查看
2013/07/12 面试题
自动化职业生涯规划书范文
2014/01/03 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
电气自动化专业职业规划范文
2014/02/16 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
公务员政审材料范文
2014/12/23 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
信仰纪录片观后感
2015/06/08 职场文书