• J2EE简单的分页器


    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);
    	}
    }
    

      

  • 相关阅读:
    静态全局变量
    java处理相对路劲
    Java 获取字符串中第N次出现的字符位置
    java 更改list 某一元素?
    for循环,如何结束多层for循环
    SQL Server Management Studio的对象资源管理器的使用
    线程
    存储过程,稍微复杂
    触发器--里面涉及触发器调存储过程
    Bootstrap:弹出框和提示框效果以及代码展示
  • 原文地址:https://www.cnblogs.com/lizhonghua34/p/4949227.html
Copyright © 2020-2023  润新知