这节介绍如何自定义jquery插件，实现分页效果，话不多说，先看看实现的效果：

分页插件

实现的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset="utf-8">
    <title>page test</title>
	<style>
		html,body,#pages,items{
			font-size:11px;
			font-family:"宋体","Times New Roman";
		}
		.page_item{
			background:#C9DCD7;
			width:155px;
			text-align:left;
			padding:10px;
			border-bottom:1px solid #3CF;
		}
		.page_item:hover{
			background:#A9C9FA;
			cursor:pointer;
		}
		#page_ctrl{
			padding-top:5px;
		}
		.page_ctrl{
			width:40px;
			text-align:center;
			background:#A9C9FA;
			float:left;
			margin:2px;
			padding-top:5px;
			padding-bottom:5px;
		}
		.page_ctrl:hover{
			background:#C9DCD7;
			cursor:pointer;
		}
	</style>
    <script type="text/javascript" src="../../zTree/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
		var showItemInfo;
		(function($){
 			$.fn.itemPage = function(options){
				var defaults = {};
				var options = $.extend(defaults, options);

				var data=options.data,//数据
					currpage=options.currpage,//当前页
					pagesize=options.pagesize;//每页显示的数据条目器

				var total=data.total;

				var items=$("<div id='items'></div>"),
					pagectrl=$("<div id='page_ctrl'></div>");

				var first=$("<div id=\"first\" class=\"page_ctrl\" onClick=\"showPage('first')\">首 页</div>"),
					prev=$("<div id=\"prev\" class=\"page_ctrl\" onClick=\"showPage('prev')\">前一页</div>"),
					next=$("<div id=\"next\" class=\"page_ctrl\" onClick=\"showPage('next')\">后一页</div>"),
					last=$("<div id=\"last\" class=\"page_ctrl\" onClick=\"showPage('last')\">末 页</div>");

				var start=getStartindex(),
					end=getEndindex();

				for(var i=start;i<end;i++){
					var itemi=$("<div class='page_item' onClick='showItemInfo("+i+")'>"+data.items[i].text+"</div>");
					items.append(itemi);
				}

				pagectrl.append(first),
				pagectrl.append(prev),
				pagectrl.append(next)
				pagectrl.append(last);

				var container = $(this);
				container.append(items),
				container.append(pagectrl);

				function getStartindex(){
					return (currpage-1)*pagesize;
				}
				function getEndindex(){
					var endIndex=0;
					if(data.total%pagesize!=0 && currpage==getLastPage()){
						endIndex = data.total;
					}
					else {
						endIndex = currpage*pagesize;
					}
					return endIndex;
				}
				showItemInfo = function(i){
					console.log(i);
				};
			}
		})(jQuery);
	</script>

    <script type="text/javascript">
		var PAGE_DATA={
			"total":10,
			"items":[
				{"id":1,"text":"数据1"},
				{"id":2,"text":"数据2"},
				{"id":3,"text":"数据3"},
				{"id":4,"text":"数据4"},
				{"id":5,"text":"数据5"},
				{"id":6,"text":"数据6"},
				{"id":7,"text":"数据7"},
				{"id":8,"text":"数据8"},
				{"id":9,"text":"数据9"},
				{"id":10,"text":"数据10"}
			]
		};
		var currpage=1;
		var pagesize=4;

		$(document).ready(function (){
			loadPages(currpage);
		});

		function showPage(page){
			console.log(page);
			switch(page){
				case "prev":{//前一页
					if(currpage>1){
						currpage=currpage-1;
					}
					else{
						alert("没有上一页了！");
					}
					break;
				}
				case "next":{//后一页
					if(currpage!=getLastPage()){
						currpage=currpage+1;
					}
					else{
						alert("没有下一页了！");
					}
					break;
				}
				case "last":{//最后一页
					currpage=getLastPage();
					break;
				}
				default:{
					currpage=1;//第一页
					break;
				}
			}
			loadPages(currpage);
		};

		function loadPages(page){
			$('#pages').html("");
			$('#pages').itemPage({
				data:PAGE_DATA,
				currpage:page,
				pagesize:pagesize
			});
		};

		function getLastPage(){
			var total=PAGE_DATA.total;
			if(total%pagesize==0){
				return total/pagesize;
			}
			else{
				return parseInt(total/pagesize)+1;
			}
		}
	</script>
</head>
<body>
	<div id="pages">
    </div>
</body>
</html>

下面说说实现思路。实现分页效果，数据的加载可以分为两种情况：一次性获取数据和动态获取数据。一次性获取数据就是将所要查询的数据一次性查询出来，在前台去做分页处理；动态获取数据是根据当前页面和每页显示的条目数去动态获取数据。对于第一种，可在数据量比较小的情况下使用，可以减去每次去请求数据库和写分页sql语句的麻烦；对于第二种，适用于数据量比较大的时候，当数据量特别大的时候，一次性查询数据不论是前端还是后端，无疑都会减缓程序的执行效率与时间。


第二种情况的实现比第一种的实现简单，所以本文就不做说明，本文为第一种。

首先，获取数据。在程序中，我模拟定义了一个数据，JSON格式的，包括总条数和各对象。

其次，根据currpage和pagesize加载所要显示的条目。这里面，获取起始数和结束数是关键。起始数比较简单，为（currpage-1）*pagesize；终止数稍微麻烦一点，因为有一个判断data.total%pagesize是否为零和当前页是不是最后一页，当data.total%pagesize！=0并且满足当前页为最后一页的条件时，终止数为data.total，否组终止数为currpage*pagesize。

再次，页面控制的实现。页面控制的关键是currpage。第一页，currpage=1即可；最后一页得判断total%pagesize是否为零，是值为total/pagesize，不是值为otal/pagesize取整+1；上一页，如果当前页大于零的情况下为当前页减1，否则，没有上一页；下一页，如果当前页小于最后一页的情况下，当前页加1，否则，没有最后一页。

最后，加载显示。

jquery自定义插件实现分页效果的更多相关文章

  1. jquery自定义插件来实现分页的效果

    本节将介绍如何定义自己的jquery插入,实现分页效果,话不多说,.看看达到的效果: 分页插件 实现的代码例如以下: <!DOCTYPE HTML PUBLIC "-//W3C//DT ...

  2. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  3. 你的专属定制——JQuery自定义插件

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

  4. jQuery自定义插件--banner图滚动

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  5. fullpage的使用以及less, Sass的属性和JQuery自定义插件的声明和使用

    使用fullpage的步骤   1 导入JQuery.js fullpage,js fullpage.css 2 组建网页布局,最外层id="fullpage" 单页class=& ...

  6. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

  7. jQuery自定义插件

    jQuery自定义插件 jQuery自定义插件按照功能分类,可以分为三类, 1>封装对象方法的插件,(也就是基于某个DOM元素的jQuery对象,局部的) 2>封装全局函数的插件,   ( ...

  8. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  9. 代码：jquery自定义插件 demo

    jquery自定义插件 demo 2016-1-13 只是一个简易的示例 <script type="text/javascript" src="http://cd ...

随机推荐

  1. C++中的默认成员函数

    一般而言,对于一个用户自定义的类类型,以下四个函数在用户没有自定义的情形下,会由编译器自动生成: 1.default constructor 2.copy constructor Someclass: ...

  2. Vincent

    歌手Don McClean的Starry Starry Night,也有很多人叫这首歌为<Vincent> 编前:金色的向日葵.燃烧般的丝柏.风吹过的麦田.旋涡状的星体……,一幅幅狂嚣般的 ...

  3. save a web page as a single file (mht format) using Delphi code

    Here's how to save a web page as a single file (mht format) using Delphi code: uses CDO_TLB, ADODB_T ...

  4. ipv6被拒的解决方法

    A,检测服务器是否支持ipv6连接 用mac 搭建IPv6环境测试,只能测试客户端到mac这段网络正常,但是mac到服务器还是IPv4的,所以没有办法测试服务器的IPv6是否正常.可以用手机打开2)步 ...

  5. HDU 6351 (Beautiful Now) 2018 Multi-University Training Contest 5

    题意:给定数N(1<=N<=1e9),k(1<=k<=1e9),求对N的任意两位数交换至多k次能得到的最小与最大的数,每一次交换之后不能出现前导零. 因为N最多只有10位,且给 ...

  6. SQL 函数以及SQL 编程

    1.数学函数:操作一个数据,返回一个结果 --去上限: ceiling ☆select --去下限:floor ☆select floor(price) from car --ABS 绝对值 --PI ...

  7. python 异常的引发和捕捉处理

      1.什么是异常(exception): 异常是python发现某个地方出现逻辑错误时,抛出一个信号,即异常的引发.如果有捕捉语句在,则异常信号被捕捉,如果没有则会传递到默认异常处理器(终止程序). ...

  8. 在Linux系统下使用Github的基本教程

    1. 安装git: sudo apt-get install git-core git-gui git-doc 2.到https://github.com/ 注册一个帐号,一会儿客户端登录的时候要使用 ...

  9. Your app uses or references the following non-public APIs的解决方案

    之前接了一个旧的项目,代码混乱,年代久远,不得不吐槽一波,好不容易改完需求提交代码,说用到了non-public APIs,搞了好久终于找到地方了,下面是我的解决过程,让大家少走弯路: 下面的被驳回的 ...

  10. iOS动画进阶 - 手摸手教你写 Slack 的 Loading 动画

    如果移动端访问不佳,可以访问我的个人博客 前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画,看着挺炫,但是是安卓版的,寻思的着仿造着写一篇iOS版的,下面是我写这个动画 ...