码迷,mamicode.com
首页 > 其他好文 > 详细

J2EE简单的分页器

时间:2016-11-01 19:11:55      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:dir   page   pat   src   init   art   doc   接口   arch   

J2EE项目特别是后台管理,或者一部分前台展示数据比较多,通常需要分页把展示折叠在数据区内.

一般有几种方式来实现分页, 一是官方分页插件,二是自己写,三是网上找(类似于第一种)

 

这里就介绍第二种, 自写的分页器.

 

问题就是如果让数据折叠在数据区内, 一种方式是一次取回所有接口数据, 将分页逻辑写在前端, 这种方式相对简单,

且不会刷新页面, 只是考虑到一次数据太多, 会占用很多时间来传数据,生成DOM树,而且数据刷新比较滞后,一般不用.

第二种方式即是当下流行的方式, 将数据分页写在服务端,一次请求一页数据, 每次传页码页数,这样服务器每次返回一

页的数据供前端展示, 小巧灵活. 不便的是每次需要传页码和页数,频繁翻页会增加请求量.

接下来我就来分析一下分页的逻辑.

 

 

1. 先看效果

技术分享

 

2. 主要功能: 点击页码处,提交请求页. 点击<和>上翻片和下翻片,附加功能是点击某片中最后一页,下翻片, 点击某片中第一页,上翻片.

 

3. 主要的障碍: 如何记录当前页, 如何分片, 如何共用分页器

 

主要的逻辑:服务器和客户端都需要增加逻辑, 服务器为数据列表型接口增加两个参数,page和pageSize, 指示当前页和页大小.

利用Hibernate中的listByPage来分页. 返回特定页的数据,注意数据是从第1页开始的.再将当前页和页大小传回到客户端.

 

客户端主要是提供一个表单来上传page和pageSize,通过点击页码来提交表单.获取Total后根据当前面和页大小生成当前片上的页码.

需要标记出当前分页器<和>的DOM位置,生成页码.

 

JS主要逻辑:

var allPageArray = new Array();
var pageArray = new Array();
var currentSlice = 1;// 当前片码
var currentPage = $(‘#pageHolder‘)[0].value;// 当前页码
var count = $(‘#countHolder‘)[0].value; // 总记录数
var initPageNum = 10; // 每片页码数量
var totalPage = Math.ceil(count / initPageNum);// 总页数
var pageUl = $(‘.pagination>ul‘)[0]; // 页码父结点
var pageNextPlace = $(‘li.next‘)[0]; // 下一片码对象
var pagePrevPlace = $(‘li.previous‘)[0]; // 上一片码对象
var lastPageTips = $(‘.lastPageTips‘)[0]; //最后一页提示DOM
clearPage(); //清空页码
initAllPageArray();//初始化

function initAllPageArray() {
	for (var i = 0; i < totalPage; i++) { // 填充totalPage内容
		allPageArray[i] = i;
	}
	if (totalPage >= initPageNum) { // 如果大于10页,装载当前面所在页片上的页码
		if (currentPage == totalPage) { // 如果已经到达最后一页
			pageArray = allPageArray.slice(currentPage - initPageNum,
					currentPage);
			tipLastPage();
		} else {
			pageArray = allPageArray.slice(currentPage - currentPage
					% initPageNum, currentPage - currentPage % initPageNum
					+ initPageNum > totalPage ? totalPage : currentPage
					- currentPage % initPageNum + initPageNum);
		}
	} else {
		pageArray = allPageArray;// 如果少于10页,全部展示
		if (currentPage == totalPage) {
			if (totalPage != 1) {
				tipLastPage();
			}
		}
	}
	loadPage(pageArray); // 装载页码
	$(‘.pagination-style>ul>li>a‘).each(function() { // 激活当前页码样式
		if (this.innerHTML == currentPage) {
			this.parentNode.className = "active";
		}
	});
}

// 取上/下翻页码数组
function getPageArray(pageArray, direct) {
	if (allPageArray.length != 0 && pageArray.length != allPageArray.length) { // 如果长度不相等则说明长度够几片
		if (direct == 0) {// 前翻
			if (pageArray[pageArray.length - 1] >= initPageNum) { // 从11页以后往前翻,前进10页
				if (pageArray[0] >= initPageNum) {// 首页大于10页,则取前10页
					pageArray = allPageArray.slice(pageArray[0] - initPageNum,
							pageArray[0]);
				} else {// 首页小于10,取上一页可能不满10页,则显示0-9页
					pageArray = allPageArray.slice(0, initPageNum);
				}
			} else {// 从1-10页往前翻.装1-10
				// 页码不需要加载
			}
		} else if (direct == 1) {// 后翻
			if (pageArray.length < 10
					|| (pageArray.length == 10 && pageArray[pageArray.length - 1] == allPageArray.length - 1)) {// 最后一片没装满或者最后一页装的是最后一片
				// 不需要处理
				pageArray = pageArray;
				tipLastPage();
			} else {
				if (allPageArray.length >= (pageArray[pageArray.length - 1] + 10)) {// 最后还有一片可以装满
					pageArray = allPageArray.slice(
							pageArray[pageArray.length - 1] + 1,
							pageArray[pageArray.length - 1] + 1 + initPageNum);
				} else {// 最后一片,装不满
					pageArray = allPageArray.slice(
							pageArray[pageArray.length - 1] + 1,
							allPageArray.length);
				}
			}

		}
	} else {// 如果长度不够10,说明一片都没存满
		pageArray = allPageArray;
	}
	return pageArray;
}
// 加载页码DOM
function loadPage(array) {// 加载一片页码
	var pageUl = $(‘.pagination>ul‘)[0];
	var pageNextPlace = $(‘li.next‘)[0];
	var num = initPageNum;
	for (var i = 0; i < array.length; i++) {
		var pageNode = pageNextPlace.cloneNode(true);//克隆的是>下翻的DOM
		pageNode.className = "";//清空className, classList不适配所有的浏览器
		var aLink = pageNode.querySelector("a");
		aLink.innerHTML = array[i] + 1;//写上页码
		aLink.className = "";
		pageUl.insertBefore(pageNode, pageNextPlace);
	}
	initPageNodeClick();
}
// 提交search form表单
$(‘input‘)[2].onblur = function() {
	$("[name=‘page‘]")[0].value = "1";
	$(‘#searchForm‘)[0].submit();
}
//
$(‘input‘)[2].onfocus = function() {
	$("[name=‘page‘]")[0].value = "1";
}

// 初始化页片上页码的点击响应功能
function initPageNodeClick() {
	$(‘.pagination-style>ul>li>a‘)
			.each(
					function() {
						this.onclick = function() {
							if (this.className == "fui-arrow-left") {
								if (totalPage <= 10) {
									if (undefined == $(‘.pagination-style>ul>li>a‘)[1].click) {

										dispatch(
												$(‘.pagination-style>ul>li>a‘)[1],
												"click"); // safari
									} else {
										$(‘.pagination-style>ul>li>a‘)[1]
												.click();
									}
									;
								} else {
									pagePrevClick();
								}
							} else if (this.className == "fui-arrow-right") {
								if (totalPage <= 10) {
									if (undefined == pageUl
											.querySelectorAll(‘li‘)[totalPage]
											.querySelector(‘a‘).click) {

										dispatch(
												pageUl.querySelectorAll(‘li‘)[totalPage]
														.querySelector(‘a‘),
												"click"); // safari
									} else {
										pageUl.querySelectorAll(‘li‘)[totalPage]
												.querySelector(‘a‘).click();
									}
								} else {
									pageNextClick();
								}
							} else {
								$("[name=‘page‘]")[0].value = this.innerHTML;
								$(‘#searchForm‘)[0].submit();
							}

						};
					})
}
// 清空页码DOM
function clearPage() {
	var liArray = $(‘.pagination-style>ul>li‘);
	for (var i = 0; i < liArray.length; i++) {
		var li = liArray[i];
		if (li.className != ‘previous‘ && li.className != ‘next‘) {
			pageUl.removeChild(li);
		}
	}
}

// 上翻页片功能
function pagePrevClick() {
	clearPage();
	pageArray = getPageArray(pageArray, 0);
	loadPage(pageArray);
}
// 下翻页片功能
function pageNextClick() {
	var temp = getPageArray(pageArray, 1);
	if (pageArray != temp) {
		pageArray = temp;
		clearPage();
		loadPage(pageArray);
	}
}
function tipLastPage() {
	$(lastPageTips).css("visibility", "visible");
	clearTips();
}

function clearTips() {
	setTimeout(function() {
		$(lastPageTips).css("visibility", "hidden");
	}, 1500);
}
//为了适配Safari,点击a标签不会触发onclick事件.
function dispatch(el, type) {
	try {
		var evt = document.createEvent(‘Event‘);
		evt.initEvent(type, true, true);
		el.dispatchEvent(evt);
	} catch (e) {
		alert(e);
	}
}

  

 

J2EE简单的分页器

标签:dir   page   pat   src   init   art   doc   接口   arch   

原文地址:http://www.cnblogs.com/lizhonghua34/p/4949227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!