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

最新推荐文章于 2024-07-10 14:03:37 发布

weixin_34186128

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量107

点赞数

文章标签： javascript 前端后端 ViewUI

本节将介绍如何定义自己的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。否则，没有最后一页。

终于，加载显示。

weixin_34186128

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery自定义插件来实现分页的效果

本节将介绍如何定义自己的jquery插入，实现分页效果，话不多说，。看看达到的效果：分页插件实现的代码例如以下：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;&lt;html&gt;&lt;head&gt; ...
复制链接

扫一扫