仿淘宝分页算法

最新推荐文章于 2022-06-25 13:27:53 发布

昔年往日

最新推荐文章于 2022-06-25 13:27:53 发布

阅读量918

点赞数 1

分类专栏：资料文章标签：淘宝分页 bootstrap 算法 javascript

本文链接：https://blog.csdn.net/liangwa408/article/details/38726833

版权

资料专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先声明分页算法是在网上找到的，原文地址忘了。在此感谢原创

//仿淘宝的分页算法
function fill_tag(a_tag, a_class, a_id, a_name, a_html) {
	a_class = (a_class == '') ? '' : ' class="' + a_class + '"';
	a_id = (a_id == '') ? '' : ' id="' + a_id + '"';
	a_name = (a_name == '') ? '' : ' name="' + a_name + '"';
	var code = '<' + a_tag + a_class + a_id + a_name + ' >' + a_html + '</'
			+ a_tag + '>';
	return code;
}

function update_page(total_page, current_page, father) {

	var total_page = parseInt(total_page);
	var current_page = parseInt(current_page);
	var pager_length;
	var header_length;
	var tailer_length = 1;
	if(isMobile()){
		pager_length=5;
		header_length = 1;
		tailer_length = 1;
	}else{
		pager_length = 7; // 不包next 和 prev 必须为奇数
		header_length = 2;
		tailer_length = 2;
	}
	var pager = new Array(pager_length);
	// header_length + tailer_length 必须为偶数
	var main_length = pager_length - header_length - tailer_length; // 必须为奇数

	var a_tag = 'li';
	var a_class = 'active';
	var a_id = '';
	var a_name = '';

	var disable_class = 'disable';
	var select_class = '';

	var i;
	var code = '';
	if (total_page < current_page) {
		alert('总页数不能小于当前页数');
		return false;
	}
	// 判断总页数是不是小于 分页的长度，若小于则直接显示
	if (total_page < pager_length) {
		for (i = 0; i < total_page; i++) {

			code += (i + 1 != current_page) ? fill_tag(a_tag, a_class, a_id,
					a_name, '<a οnclick="toPage(' + (i + 1)
							+ ')" href="javascript:void(0);">' + (i + 1)
							+ '</a>') : fill_tag(a_tag, select_class, a_id,
					a_name, '<a οnclick="toPage(' + (i + 1)
							+ ')" href="javascript:void(0);">' + (i + 1)
							+ '</a>');
		}
	}
	// 如果总页数大于分页长度，则为一下函数
	else {
		// 先计算中心偏移量
		var offset = (pager_length - 1) / 2;
		// 分三种情况，第一种左边没有...
		if (current_page <= offset + 1) {
			var tailer = '';
			// 前header_length + main_length 个直接输出之后加一个...然后输出倒数的 tailer_length 个
			for (i = 0; i < header_length + main_length; i++)
				code += (i + 1 != current_page) ? fill_tag(a_tag, a_class,
						a_id, a_name, '<a οnclick="toPage(' + (i + 1)
								+ ')" href="javascript:void(0);">' + (i + 1)
								+ '</a>') : fill_tag(a_tag, select_class, a_id,
						a_name, '<a οnclick="toPage(' + (i + 1)
								+ ')" href="javascript:void(0);">' + (i + 1)
								+ '</a>');
			code += fill_tag(a_tag, a_class, a_id, a_name,
					'<a  href="javascript:void(0);">...</a>');
			for (i = total_page; i > total_page - tailer_length; i--)
				tailer = fill_tag(a_tag, a_class, a_id, a_name,
						'<a οnclick="toPage(' + (i)
								+ ')" href="javascript:void(0);">' + (i)
								+ '</a>')
						+ tailer;

			code += tailer;
		}
		// 第二种情况是右边没有...
		else if (current_page >= total_page - offset) {
			var header = '';
			// 后tailer_length + main_length 个直接输出之前加一个...然后拼接 最前面的 header_length
			// 个
			for (i = total_page; i >= total_page - main_length - 1; i--)
				code = ((current_page != i) ? fill_tag(a_tag, a_class, a_id,
						a_name, '<a οnclick="toPage(' + (i)
								+ ')" href="javascript:void(0);">' + (i)
								+ '</a>') : fill_tag(a_tag, select_class, a_id,
						a_name, '<a οnclick="toPage(' + (i)
								+ ')" href="javascript:void(0);">' + (i)
								+ '</a>'))
						+ code;
			code = fill_tag(a_tag, a_class, a_id, a_name,
					'<a  href="javascript:void(0);">...</a>')
					+ code;
			for (i = 0; i < header_length; i++)
				header += fill_tag(a_tag, a_class, a_id, a_name,
						'<a οnclick="toPage(' + (i + 1)
								+ ')" href="javascript:void(0);">' + (i + 1)
								+ '</a>');

			code = header + code;
		}
		// 最后一种情况，两边都有...
		else {
			var header = '';
			var tailer = '';
			// 首先处理头部
			for (i = 0; i < header_length; i++)
				header += fill_tag(a_tag, a_class, a_id, a_name,
						'<a οnclick="toPage(' + (i + 1)
								+ ')" href="javascript:void(0);">' + (i + 1)
								+ '</a>');
			header += fill_tag(a_tag, a_class, a_id, a_name,
					'<a  href="javascript:void(0);">...</a>');
			// 处理尾巴
			for (i = total_page; i > total_page - tailer_length; i--)
				tailer = fill_tag(a_tag, a_class, a_id, a_name,
						'<a οnclick="toPage(' + (i)
								+ ')" href="javascript:void(0);">' + (i)
								+ '</a>')
						+ tailer;
			tailer = fill_tag(a_tag, a_class, a_id, a_name,
					'<a  href="javascript:void(0);">...</a>')
					+ tailer;
			// 处理中间
			// 计算main的中心点
			var offset_m = (main_length - 1) / 2;
			var partA = '';
			var partB = '';
			var j;
			var counter = (parseInt(current_page) + parseInt(offset_m));
			for (i = j = current_page; i <= counter; i++, j--) {
				partA = ((i == j) ? '' : fill_tag(a_tag, a_class, a_id, a_name,
						'<a οnclick="toPage(' + (j)
								+ ')" href="javascript:void(0);">' + (j)
								+ '</a>'))
						+ partA;
				partB += (i == j) ? fill_tag(a_tag, select_class, a_id, a_name,
						'<a οnclick="toPage(' + (i)
								+ ')" href="javascript:void(0);">' + (i)
								+ '</a>') : fill_tag(a_tag, a_class, a_id,
						a_name, '<a οnclick="toPage(' + (i)
								+ ')" href="javascript:void(0);">' + (i)
								+ '</a>');
			}
			// 拼接
			code = header + partA + partB + tailer;

		}
	}

	var prev = (current_page == 1) ? fill_tag(a_tag, disable_class, a_id,
			a_name, '<a  href="javascript:void(0);">«</a>') : fill_tag(
			a_tag, a_class, a_name, a_name, '<a οnclick="toPage('
					+ (current_page - 1)
					+ ')" href="javascript:void(0);">«</a>');
	var next = (current_page == total_page) ? fill_tag(a_tag, disable_class,
			a_id, a_name, '<a  href="javascript:void(0);">»</a>')
			: fill_tag(a_tag, a_class, a_name, a_name, '<a οnclick="toPage('
					+ (current_page + 1)
					+ ')" href="javascript:void(0);">»</a>');
	code = prev + code + next;
	document.getElementById(father).innerHTML = (code);
}

页面Jquery

var pagecount;

				$(function() {
					toPage(0);
				});

				//执行分页并返回信息
				function toPage(pageNum) {
					var pageSize = $("#pageSize").val();
					var url = "/simo/getworkstationstatistics";
					$.ajax({
						url : url,
						data : {
							deviceId : "${param.deviceId}",
							pageNum : pageNum,
							pageSize : pageSize
						},
						dataType : "JSON",
						type : "get",
						error : function() {
							alert("失败");
						},
						success : function(data) {
							parse(data);
						}
					});

				}

				//显示分页信息
				function parse(page) {
					var list = page.list;
					var currpage = page.currentPage;
					pagecount = page.totalPage;
					if (currpage < 1) {
						currpage = 1;
					} else if (currpage > pagecount) {
						currpage = pagecount;
					}
					update_page(pagecount, currpage, 'page');
					$("#pageRecord").html(
							'当前第' + currpage + '页/总' + pagecount + '页，共'
									+ page.allRow + '条数据');
					var html = '';
					for ( var i = 0; i < list.length; i++) {
						var data = list[i];
						html += '<tr class="th">'
								+ '<td class="td">'
								+ data[1]
								+ '</td>'
								+ '<td class="td">'
								+ data[2]
								+ '</td>'
								+ '<td class="td"><a href="/simo/getworkstationchart?workstationId='
								+ data[0]
								+ '">'
								+ '<img alt="'+data[3]+'" title="'+data[3]+'" src="/simo/resources/img/'+data[3]+'_small.png" /></a>'
								+ '</td>' + '<td class="td">' + data[4]
								+ '</td>' + '<td class="td">' + data[5]
								+ '</td>' + '<td class="td">' + data[6]
								+ '</td>' + '</tr>';
					}
					$("#tbody").html(html);
					var bdh = $(".body_d").height();
					if (bdh >= 600) {

						$(".menu_d").height(bdh + 20);
					}
				}

用的Bootstrap