首先声明分页算法是在网上找到的,原文地址忘了。在此感谢原创
//仿淘宝的分页算法
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