基于jQuery轻量分页插件jquery.pages.js—alpha版

最新推荐文章于 2021-02-20 16:25:00 发布
最新推荐文章于 2021-02-20 16:25:00 发布
阅读量286 收藏 1
点赞数
文章标签： javascript python xhtml ViewUI
原文链接：https://my.oschina.net/yongbaolinux/blog/167429
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

插件jquery.pages.js代码： 

<script type="text/javascript">
	;(function($){
		var defaults = {
			itemPerPage:5,            //每页记录数
			theme:'default',          //主题样式
			id:'pages_plugin',        //添加的插件DOM的id名
		}
		//实时记录分页状态
		var status = {
			first:false,
			last:true,
			previous:false,
			next:true,
			current:1,
		};
		$.fn.pages = function(){
			var config = arguments[0] || {};
			if(!$.isPlainObject(config)) return;
			this.config = $.extend({},defaults,config);
			init_html.call(this);
			init_data.call(this);
			init_event.call(this);
		}
		
		//初始化html结构
		function init_html(){
			//判断选择器是否选中了table
			if(!($(this)[0].tagName.toLowerCase() === 'table')){
				return false;
			}
			//构造page html
			var page_html = '<tfoot id="'+this.config.id+'"><tr>\
            <th>\
              <div>\
               <div class="col-sm-6">\
                <div id="DataTables_Table_0_info" class="dataTables_info">\
                  <span id="start_contact_person"></span> to <span id="end_contact_person"></span> of <span id="total_contact_person"></span> \
                </div>\
               </div>\
               <div class="col col-sm-6">\
                <div id="DataTables_Table_0_paginate" class="dataTables_paginate">\
                 <a id="DataTables_Table_0_first" tabindex="0" class="first paginate_button paginate_button_disabled">首页</a><a id="DataTables_Table_0_previous" tabindex="0" \class="previous paginate_button paginate_button_disabled">上一页</a><span id="contact_person_page_span"></span><a id="DataTables_Table_0_next" tabindex="0" class="next paginate_button">下一页</a><a \id="DataTables_Table_0_last" tabindex="0" class="last paginate_button">末页</a>\
                </div>\
               </div>\
              </div>\
            </th>\
          </tr></tfoot>';
		  $(this).append(page_html);
		  //加载样式
		  var style='<link rel="stylesheet" type="text/css" href="'+this.config.theme+'.css" />'
		  $("head").append(style); 
		}
		
		//初始化数据
		var count,pages;
		function init_data(){
			//计算总记录条数
			count = $(this).find('tbody tr').length;
			//左下角show items
			$("#total_contact_person").html(count);
			//计算总页数
			pages = Math.ceil(count/this.config.itemPerPage);
			//构造分页按钮html
			var page_html = '';
			for(var i=1;i<=pages;i++){
				page_html += '<a class="paginate_button" tabindex="0">'+i+'</a>';
			}
			$("#contact_person_page_span").html(page_html);
			//初始化分页状态对象
			status.first = status.previous = false;
			if(pages>1){
				status.last = status.next = true;	
			} else {
				status.last = status.next = false;
			}
			status.current = 1;
			//根据分页状态对象初始化html
			setStatus.call(this,status);
		}
		
		//初始化事件绑定
		function init_event(){
		  var tableDom = this;
		  $("#"+this.config.id+" #DataTables_Table_0_first").on('click',function(){
			if(!$(this).hasClass('paginate_button_disabled')){
				status.current = 1;
				status.first = status.previous = false;
				if(pages>1){
					status.last = status.next = true;	
				} else {
					status.last = status.next = false;
				}
				//改变结构
				setStatus.call(tableDom,status);
			}
		  });
		  $("#"+this.config.id+" #DataTables_Table_0_last").on('click',function(){
			if(!$(this).hasClass('paginate_button_disabled')){
				status.current = pages;
				status.last = status.next = false;
				if(pages>1){
					status.first = status.previous = true;	
				} else {
					status.first = status.previous = false;
				}
				//改变结构
				setStatus.call(tableDom,status);
			}
		  });
		  $("#"+this.config.id+" #DataTables_Table_0_previous").on('click',function(){
			if(!$(this).hasClass('paginate_button_disabled')){
				if(status.current > 1){
					if(--status.current === 1){
						status.first = status.previous = false;	
					} else {
						status.first = status.previous = true;	
					}
					status.last = status.next = true;
					setStatus.call(tableDom,status);
				}
			}
		  });
		  $("#"+this.config.id+" #DataTables_Table_0_next").on('click',function(){
			if(!$(this).hasClass('paginate_button_disabled')){
				if(status.current < pages){
					if(++status.current === pages){
						status.last = status.next = false;	
					} else {
						status.last = status.next = true;	
					}
					status.first = status.previous = true;
					setStatus.call(tableDom,status);
				}
			}
		  });
		  $("#"+this.config.id+" #contact_person_page_span a").each(function(index, element) {
			$(element).on('click',function(){
				if(!$(element).hasClass('paginate_button_disabled')){	
				  status.current = index+1;
				  if(status.current === 1){
					  status.first = status.previous = false;
					  if(pages > 1){
						  status.last = status.next = true;
					  } else {
						  status.last = status.next = false;
					  }		
				  } else if(status.current === pages){
					  status.last = status.next = false;
					  if(pages > 1){
						  status.first = status.previous = true;
					  } else {
						  status.first = status.previous = false;
					  }
				  } else {
					  status.first = status.previous = status.last = status.next = true;
				  }
				  setStatus.call(tableDom,status);
				}
			});
		  });
		}
		
		function setStatus(status){
			//遍历状态对象
			for(i in status){
				if(i !== 'current'){
					if(status[i] === false){
						$("#"+this.config.id+" #DataTables_Table_0_"+i).addClass('paginate_button_disabled');
					} else {
						$("#"+this.config.id+" #DataTables_Table_0_"+i).removeClass('paginate_button_disabled');
					}
				} else {
					$("#"+this.config.id+" #contact_person_page_span a").each(function(index, element) {
						$(element).removeClass('paginate_active').addClass('paginate_button');
						if(index === (status.current-1)){
							$(element).removeClass('paginate_button').addClass('paginate_active');
						}
					});
				}
			}
			//左下角show items
			var start_contact_person = (status.current-1)*this.config.itemPerPage + 1;
			var end_contact_person = start_contact_person + this.config.itemPerPage - 1;
			end_contact_person = (end_contact_person < count) ? end_contact_person : count;
			$("#"+this.config.id+" #start_contact_person").html(start_contact_person);
			$("#"+this.config.id+" #end_contact_person").html(end_contact_person);
			//显示隐藏各tr来实现分页效果
			$(this).find("tbody tr").hide().slice(start_contact_person-1,end_contact_person).show();
		}
	})(jQuery);
</script>
插件默认样式代码： 

#pages_plugin{
	font-family:"微软雅黑";
	font-size:13px;
}
#pages_plugin th{
	font-weight:400;
}
/*#pages_plugin .row:before{
	content:" ";
	display:table;
}
#pages_plugin .row:after{
	content:" ";
	display:table;
}
*:before{
	box-sizing:border-box;	
}*/
#pages_plugin .col-sm-6{
	float:left;
}
#pages_plugin .col-sm-6{
	width:50%;
}
#pages_plugin .dataTables_paginate{
	padding:15px;
	float:right;
}
#pages_plugin .dataTables_info{
	padding:15px;
}
#pages_plugin .dataTables_paginate a{
	color:#3A5A7A;
	text-decoration:none;
}
#pages_plugin .dataTables_paginate .paginate_button,.dataTables_paginate .paginate_active{
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #DDDDDD;
    border-image: none;
    border-style: solid;
    border-width: 1px 0 1px 1px;
    cursor: pointer;
    outline: 0 none;
    padding: 6px 10px;
}

#pages_plugin .paginate_button.first{
	border-radius:3px 0px 0px 3px;
}
#pages_plugin .paginate_button.last{
	border-radius:0px 3px 3px 0px;
	border-right-width:1px;
}
#pages_plugin .dataTables_paginate .paginate_active{
	background-color:#F5F5F5;
}
#pages_plugin .dataTables_paginate .paginate_button_disabled{
	background-color: #FAFAFA;
    color: #CCCCCC;
}
插件使用方法: 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="jquery.pages.js"></script>
<title>test pages</title>
</head>

<body>
    <table id="test" cellpadding="0" cellspacing="0" width="60%">
    	 <tr><td>1</td><td>1</td></tr>
        <tr><td>2</td><td>1</td></tr>
        <tr><td>2</td><td>1</td></tr>
        <tr><td>2</td><td>1</td></tr>
    </table>
</body>
<script type="text/javascript">
	$("#test").pages({
		itemPerPage:2,            	
	});
</script>
</html>

转载于:https://my.oschina.net/yongbaolinux/blog/167429

weixin_34290000
关注
jQuery jPages （jQuery 分页插件）
10-10
jPages 是一个超给力的 jQuery 分页插件，它提供了很多丰富的新特性，如下： 自动翻页功能 可用键盘和鼠标滚动浏览 内容延迟显示 支持自定义分页导航菜单
jquery.pages:一个简单的jQuery分页插件
05-08
jquery.pages #简介 一个简单的jQuery分页插件。主要有两种分页方法： 通过Ajax获取数据分页 本地数据进行分页显示 #使用方法 引入"jquery.pages.css"(样式根据自己主题自行修改) <link href="./css/jquery.pages.css" rel="stylesheet"> 引入jQuery和jquery.pages插件，如图： [removed][removed] [removed][removed] 初始化参数 初始化分页插件： $(function(){ //init page plugin $("div.page").pages({ url: '',
jQuery分页插件jPages，使用简单
qq_35238997的博客
02-20 284
jPages是一个客户端分页插件，它比其他大多数插件多了很多功能，比如自动翻页，滚动浏览，显示延迟，完全可定制的导航面板也集成项目与Animate.css和延迟加载。 兼容性：兼容所有的浏览器 使用方法 下面的代码添加到您的网页的部分： <link rel="stylesheet" href="css/jPages.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></
jquery.page.js下载
08-20
jquery.page.js打包下载，包括jquery.page.js,jquery.page.css和jquery.min.js
JQuery.Page.js分页插件的使用
C770711142的博客
10-25 236
1、简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" /> <script src="~/Scripts/jQuery-1.8.3.js"></script> <script src="~/Scripts/Page/jquery.page...
jquery.paginate.js分页插件
12-11
`jQuery Paginate.js` 是一个轻量级的jQuery分页插件，它使得在网页上实现美观且功能齐全的分页功能变得非常简单。这个插件可以从`http://www.jq22.com/message34`获取，同时也提供了`style.css`样式文件和依赖的`...
jquery.pager.js分页实现详解
10-16
- jquery.pager.js 是一个基于jQuery的分页插件，要求用户至少使用jQuery v1.2.6或更高版本。 - 该插件通过简单的调用方式即可实现复杂的分页功能，支持自定义分页按钮点击事件。 2. 插件使用方法： - 使用该...
jquery分页插件pagination使用教程
10-17
jQuery分页插件Pagination是一个非常实用的工具，用于在网页中实现数据的分页展示，尤其是在处理大量数据时，能够提高用户体验。以下是对该插件的详细使用教程： 1. **引入依赖** 使用Pagination插件前，首先需要...
PHP、Smarty与jQuery Ajax 分页插件jquery.pager.js的使用
04-06
- jQuery pager：基于jQuery的分页插件，简化分页操作。 #### 三、具体实现 1. **创建PHP文件**： 创建一个名为`index.php`的文件，用于处理数据查询及分页逻辑。 ```php include_once("./class.config....
jQuery实现的分页插件完整示例
10-15
jQuery分页插件是一种用于处理大量数据展示时的页面分段工具，它可以将大量内容分成多个部分，使得用户能够方便地浏览和切换不同页码，提高网页的用户体验。本示例将详细介绍如何使用jQuery实现一个分页插件，并通过...
JQ利用jPages.js实现完美分页
01-21
我在网上找了好多，但是都不是很全，这个比较全，可以实际运用.记得一定要引用jQuery.1.8.2.min.js和jPages.js
jquery.page.js
06-27
JQuery.page.js分页插件的源码，使用方法参见http://www.lanrenzhijia.com/jquery/fenye-jquery.page.html
jquery.pager.js下载
08-19
jquery.pager.js jquery.pager.js
jquery-page js+css
12-05
html 分页插件，适用大部分浏览器，简单易懂！！！！！！！！！！！！！！！！！！！！！！！！！！
jquery.printPage.js
07-07
jquery.printPage.js 用于web打印功能的js
pager.js 文件
qq_39822451的博客
11-03 312
$.fn.pageList = function (arg, methodName) { if (typeof methodName === "string" &amp;&amp; $.trim(methodName) != "") { switch (methodName) { case 'refresh'://刷新当前页,一般用于删...
jquery.page.js 分页js的使用
紫叶溪~~
04-23 2947
       前提：这个是基于jquery的前提下，要引入jquery。       这个js网上可以下载到，个人觉得风格比较直观简洁，但是真正在代码中使用的时候会出现问题，所以把修改好的记录下来了，由于修改太久了，不太记得改过什么，没有记错的话是加了个解绑方法：由于每次点击都会触发绑定事件，每次绑定完都没有解绑，下次又进行绑定，就会有双重绑定，导致跳转的页码不对，每次使用后进行解绑，到下次使用时...
使用jQuery.pager.js进行无刷新分页(当然想带刷新的话更简单)
热门推荐
云想慕尘的专栏
04-15 1万+
首先添加脚本引用然后写javascript代码：<!-- $(document).ready(function() { $("#pager").pager({ pagenumber: 1, pagecount: , buttonClickCallback: PageClick }); });
jQuery 分页插件 jPages 使用
hffgjh的博客
11-16 193
jQuery 分页插件 jPages 使用
jQuery分页插件实现详解
总结来说，这个示例提供了一个基本的jQuery分页插件的实现框架，但具体的分页逻辑（如生成链接和处理用户交互）需要在外部JavaScript文件中完成。开发者可以根据需求调整和扩展这个基础模板，以适应不同的项目需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值