前端技术(4) : 分页,java后台专用分页

使用方法 : 在两个input标签内的value赋值即可完成分页初始化,每点击以下就会跳转当前url+page=跳转的页数;

效果图:

注: 需引入jQuery

代码如下:

html:

<div id="page" class="page_div"></div>

		<!-- 初始化当前页 -->
		<input type="hidden" name='current_page' value='5'>
		<!-- 初始化总页数 -->
		<input type="hidden" name='total_page' value='40'>

页面添加js:

// 初始化
// 当前页
var current_page = $("input[name='current_page']").val();
// 总页数
var total_page = $("input[name='total_page']").val();

var a = parseInt(current_page);
var b = parseInt(total_page);
var back = 'back';
var next = 'next';
var end = 'end';
//分页
$("#page").paging({
	pageNo: a,
	totalPage: b,
	// totalSize: 300,
	callback: function(num) {
		// alert(num)
	}
})
// 只有一页时隐藏分页
if(total_page == '1'){
	$("#page").hide();
}

css:

* {
	padding: 0;
	margin: 0;
}

.page_div {
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 15px;
	font-family: "microsoft yahei";
	color: #666666;
	margin-right: 10px;
	padding-left: 20px;
	box-sizing: border-box;
}

.page_div a {
	min-width: 30px;
	height: 28px;
	border: 1px solid #dce0e0!important;
	text-align: center;
	margin: 0 4px;
	cursor: pointer;
	line-height: 28px;
	color: #666666;
	font-size: 13px;
	display: inline-block;
}

#firstPage,
#lastPage {
	width: 50px;
	color: #0073A9;
	border: 1px solid #0073A9!important;
}

#prePage,
#nextPage {
	width: 70px;
	color: #0073A9;
	border: 1px solid #0073A9!important;
}

.page_div .current {
	background-color: #0073A9;
	border-color: #0073A9;
	color: #FFFFFF;
}

.totalPages {
	margin: 0 10px;
}

.totalPages span,
.totalSize span {
	color: #0073A9;
	margin: 0 5px;
}

.go_page {
	min-width: 30px;
	height: 28px;
	border: 1px solid #dce0e0!important;
	width: 30px;
}

#go_cl {
	color: #0073A9;
	border: 1px solid #0073A9!important;
}

js:

(function($, window, document, undefined) {
	function Paging(element, options) {
		this.element = element;
		this.options = {
			pageNo: options.pageNo || 1,
			totalPage: options.totalPage,
			totalSize: options.totalSize,
			callback: options.callback
		};
		this.init();
	}
	Paging.prototype = {
		constructor: Paging,
		init: function() {
			this.creatHtml();
			this.bindEvent();
		},
		creatHtml: function() {
			var me = this;
			var content = "";
			var current = me.options.pageNo;
			var total = me.options.totalPage;
			var totalNum = me.options.totalSize;
			content += "<a id=\"firstPage\" onclick='asd(1)'>首页</a><a id='prePage' onclick='asd(back)'>上一页</a>";
			if(total > 6) {
				if(current < 5) {
					for(var i = 1; i < 6; i++) {
						if(current == i) {
							content += "<a class='current' >" + i + "</a>";
						} else {
							content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
						}
					}
					content += ". . .";
					content += "<a onclick='asd(" + total + ")'>" + total + "</a>";
				} else {
					if(current < total - 3) {
						for(var i = current - 2; i < current + 3; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
							}
						}
						content += ". . .";
						content += "<a onclick='asd(" + total + ")'>" + total + "</a>";
					} else {
						content += "<a onclick='asd(1)'>1</a>";
						content += ". . .";
						for(var i = total - 4; i < total + 1; i++) {
							if(current == i) {
								content += "<a class='current'>" + i + "</a>";
							} else {
								content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
							}
						}
					}
				}
			} else {
				for(var i = 1; i < total + 1; i++) {
					if(current == i) {
						content += "<a class='current'>" + i + "</a>";
					} else {
						content += "<a onclick='asd(" + i + ")'>" + i + "</a>";
					}
				}
			}
			content += "<a id='nextPage' onclick='asd(next)'>下一页</a>";
			content += "<a id=\"lastPage\" onclick='asd(total_page)'>尾页</a>   <input type='text' class='go_page' /> <a id='go_cl' onclick='go_page()'>go</a>";
			me.element.html(content);
		},
		bindEvent: function() {
			var me = this;
			me.element.off('click', 'a');
			me.element.on('click', 'a', function() {
				var num = $(this).html();
				var id = $(this).attr("id");
				if(id == "prePage") {
					if(me.options.pageNo == 1) {
						me.options.pageNo = 1;
					} else {
						me.options.pageNo = +me.options.pageNo - 1;
					}
				} else if(id == "nextPage") {
					if(me.options.pageNo == me.options.totalPage) {
						me.options.pageNo = me.options.totalPage
					} else {
						me.options.pageNo = +me.options.pageNo + 1;
					}

				} else if(id == "firstPage") {
					me.options.pageNo = 1;
				} else if(id == "lastPage") {
					me.options.pageNo = me.options.totalPage;
				} else {
					me.options.pageNo = +num;
				}
				me.creatHtml();
				if(me.options.callback) {
					me.options.callback(me.options.pageNo);
				}
			});
		}
	};
	$.fn.paging = function(options) {
		return new Paging($(this), options);
	}
})(jQuery, window, document);

// 页面跳转
function asd(page) {
	var current = $('.current').html();
	if(page == 'back') {
		current--;
		if(current == 0) {
			return false;
		}
		let url = window.location.href;
		if(url.indexOf("?") > 0) {
			var urls = new Array(); //定义一数组 
			urls = url.split("?"); //字符分割 
			url = urls[0];
		}
		// 跳转
		window.location.href = url + '?page=' + current;
	} else if(page == 'next') {
		current++;
		if(current > b) {
			return false;
		}
		let url = window.location.href;
		if(url.indexOf("?") > 0) {
			var urls = new Array(); //定义一数组 
			urls = url.split("?"); //字符分割 
			url = urls[0];
		}
		// 跳转
		window.location.href = url + '?page=' + current;

	} else {
		let url = window.location.href;
		if(url.indexOf("?") > 0) {
			var urls = new Array(); //定义一数组 
			urls = url.split("?"); //字符分割 
			url = urls[0];
		}
		// 跳转
		window.location.href = url + '?page=' + page;
	}
}

// 根据页数跳转
function go_page() {
	var go_page = $('.go_page').val();
	console.log(go_page);
	if(go_page == '') {
		console.log(11)
	}
	let url = window.location.href;
	if(url.indexOf("?") > 0) {
		var urls = new Array(); //定义一数组 
		urls = url.split("?"); //字符分割 
		url = urls[0];
	}
	// 跳转
	window.location.href = url + '?page=' + go_page;
}