1：js
$.extend({
pageing: function (bgn, ed, json, pagesize) {//开始读取位置 读取结束位置 要执行的json 每页显示的条数
var pagesizing_html = "";
var pagesizing_end = ed;
(pagesizing_end > json.length) ? pagesizing_end = json.length : pagesizing_end = ed;//如果数据行数小于每页显示的行数就将结束位置改为数据的长度
//读取json
for (var i = bgn; i < pagesizing_end; i++) {
pagesizing_html += "<tr><td>" + json[i].a + "</td><td>" + json[i].b + "</td><td>" + json[i].c + "</td></tr>";
}
var pagesizing_page = json.length;//获取json长度 即是 table所有的行数
var p = Math.ceil(pagesizing_page / pagesize);//长度除以每页显示的行数 就是分页数
var pagesizing_a = "";//存储分页
var this_aa = (bgn / pagesize) + 1;//存储结束页
var this_aaa;
((this_aa + 7) == p || (this_aa + 7) > p) ? this_aaa = p : this_aa = this_aa;
if (p == 1) { //页数只有一页
}
else if (p < 9) {//页数小于9页 就全部显示出来
for (var i = 1; i <= p; i++) {
pagesizing_a += "<a href='javacsript:void(0)'>" + i + "</a>";//显示页数
}
}
else { //页数大于9页
//显示首页
pagesizing_a += "<a href='javascript:void(0)' >上一页</a>";
pagesizing_a += "<a href='javascript:void(0)'style='background-color:#3CC480;color:white' >1</a>";
for (var i = 2; i < 6; i++) {//加载出前五页
pagesizing_a += "<a href='javascript:void(0)'>" + i + "</a>";//显示页数
}
//显示最后一页
pagesizing_a += "<a href='javascript:void(0)'>...</a>";
pagesizing_a += "<a href='javascript:void(0)'>" + p + "</a>";
//显示下一页
pagesizing_a += "<a href='javascript:void(0)' >下一页</a>";
pagesizing_a += "<input type='number' value='1' min='1' max='"+p+"' style='width:40px' id='pagesizing_num'/>";
pagesizing_a += "<a href='javascript:void(0)' style='float:right'>跳转</a>";
}
pagesizing_html += "&<tr><td colspan='3' style='text-align:center'>" + pagesizing_a + "</td></tr>";//用&区分开显示内容与分页数
return pagesizing_html;
}
});
$(function () {
})
$.fn.extend({
aClick: function (returnJson, psize) {//读取的json 每页条数
var this_parentId = $(this).parent().parent().parent().attr("id");//获取tfoot的id
var pagesiziing_a1 = 1;
var pagesiziing_a = 1;
$("#" + this_parentId).on("click", "a", function () {
var pagesizing_jsons = returnJson;//存储读取的json
var pagesizing_pagesize = psize;//存储每页条数
var pagesizing_pagesizes = Math.ceil(returnJson.length / psize);//总页数
//获取点击的a 获取页数值
var index = $(this).text();//存储点击的页数 pagesiziing_a--; index = pagesiziing_a;
if (index == "首页") { index = 1; pagesiziing_a = 1; }
else if (index == "跳转") { if (parseInt($("#pagesizing_num").val()) > pagesizing_pagesizes || parseInt($("#pagesizing_num").val()) < 1) { return; } else { pagesiziing_a = parseInt($("#pagesizing_num").val()); } }
else if (index == "上一页") { if (((pagesiziing_a - 1)) < 1) { return; } else { pagesiziing_a-=1; index = (pagesiziing_a); } }
else if (index == "下一页") { if (((pagesiziing_a + 1)) > pagesizing_pagesizes) { return; alert("下一页return") } else { pagesiziing_a += 1; index=(pagesiziing_a); } }
else if (index == "...") { return; }
//if (index == "末页") { index = pagesizing_pagesizes; pagesiziing_a = index; }
else { index = parseInt(index); pagesiziing_a = index; }
var begin = 0, end = 0;//存储开始结束页数
//计算开始位置 结束位置
begin = (pagesiziing_a - 1) * pagesizing_pagesize;//json读取开始位置
(begin + pagesizing_pagesize > pagesizing_jsons.length) ? end = pagesizing_jsons.length : end = begin + pagesizing_pagesize;//设置结束为止判断 读取的json是否超出了json 的长度
//参数(开始位置，结束位置[首次调用传每页条数]，读取json，每页条数,当前的页数)
var this_html = $.pageing(begin, end, pagesizing_jsons, pagesizing_pagesize);
var html_sp = this_html.split('&');
$("#" + this_parentId).siblings().eq(1).empty();
$("#" + this_parentId).siblings().eq(1).append(html_sp[0]);
var p = Math.ceil(returnJson.length / psize);//获取总页数
//重新设置显示分页数
if (p > 8) {
var new_a = "<tr><td colspan='3'>";//存储分页
var index1 = pagesiziing_a + 2;
if (pagesiziing_a > 4 && index1 < p) {//点击的页数第五页与总页数之间
$("#" + this_parentId).empty();//清空显示页数的位置
new_a += "<a href='javascript:void(0)'>上一页</a>";
new_a += "<a href='javascript:void(0)'>首页</a>";
new_a += "<a href='javascript:void(0)'>...</a>";
new_a += "<a href='javascript:void(0)'>" + (pagesiziing_a - 2) + "</a>";
new_a += "<a href='javascript:void(0)'>" + (pagesiziing_a - 1) + "</a>";
new_a += "<a href='javascript:void(0)' style='background-color:#3CC480;color:white'>" + pagesiziing_a + "</a>";
new_a += "<a href='javascript:void(0)'>" + (pagesiziing_a + 1) + "</a>";
new_a += "<a href='javascript:void(0)'>" + (pagesiziing_a + 2) + "</a>";
new_a += "<a href='javascript:void(0)'>...</a>";
new_a += "<a href='javascript:void(0)'>" + p + "</a>";
new_a += "<a href='javascript:void(0)' >下一页</a>";
new_a += "<input type='number' value='1' min='1' max='" + pagesizing_pagesizes + "' style='width:40px' id='pagesizing_num'/>";
new_a += "<a href='javascript:void(0)' style='float:right'>跳转</a>";
$("#" + this_parentId).append(new_a);
//改变点击的a的背景色
}
else if ((pagesiziing_a + 2) > (p - 1)) {
$("#" + this_parentId).empty();//清空显示页数的位置
new_a += "<a href='javascript:void(0)'>上一页</a>";
new_a += "<a href='javascript:void(0)'>首页</a>";
new_a += "<a href='javascript:void(0)'>...</a>";
for (var i = (p - 5) ; i <= p; i++) {
new_a += "<a href='javascript:void(0)'>" + i + "</a>";
}
new_a += "<a href='javascript:void(0)' >下一页</a>";
new_a += "<input type='number' value='1' min='1' max='" + pagesizing_pagesizes + "' style='width:40px' id='pagesizing_num'/>";
new_a += "<a href='javascript:void(0)' style='float:right'>跳转</a>";
$("#" + this_parentId).append(new_a);
var to_Change;
if (pagesiziing_a == p) { to_Change = 8 }
if (pagesiziing_a == (p - 1)) { to_Change = 7 }
if (pagesiziing_a == (p - 2)) { to_Change = 6 }
to_Change = parseInt(to_Change);
$("#" + this_parentId).children().children().children("a").eq(to_Change).css({ "background-color": "#3CC480", "color": "white" });
}
else if (pagesiziing_a < 5) {
$("#" + this_parentId).empty();//清空显示页数的位置
new_a += "<a href='javascript:void(0)'>上一页</a>";
for (var i = 1; i < 6; i++) {
new_a += "<a href='javascript:void(0)'>" + i + "</a>";
}
new_a += "<a href='javascript:void(0)'>...</a>";
new_a += "<a href='javascript:void(0)'>" + p + "</a>";
new_a += "<a href='javascript:void(0)' >下一页</a>";
new_a += "<input type='number' value='1' min='1' max='" + pagesizing_pagesizes + "' style='width:40px' id='pagesizing_num'/>";
new_a += "<a href='javascript:void(0)' style='float:right'>跳转</a>";
$("#" + this_parentId).append(new_a);
$("#" + this_parentId).children().children().children("a").eq((pagesiziing_a)).css({ "background-color": "#3CC480", "color": "white" });
}
}
});
}
})
2:HTML 使用
//显示第一页、分页 参数(开始位置，结束位置[首次调用传每页条数]，读取json，每页条数)
$("#tbl3").append($.pageing(0, pagesize, returnJson1, pagesize).split("&")[0]);//table的tbody
$("#tbl4").append($.pageing(0, pagesize, returnJson1, pagesize).split("&")[1]);//table的tfoot
$("#tbl4 a").aClick(returnJson1, pagesize);
3:
var newJson = {
"name": [
{ "a": "张三", "b": "男", "c": "三年一班" },
{ "a": "李四", "b": "女", "c": "四年二班" },
{ "a": "王五", "b": "男", "c": "五年三班" },
{ "a": "哇哈哈", "b": "未知", "c": "宗庆后" },
{ "a": "营养快线", "b": "未知", "c": "李宗盛" },
{ "a": "6", "b": "b", "c": "c" },
{ "a": "7", "b": "b", "c": "c" },
{ "a": "8", "b": "b", "c": "c" },
{ "a": "9", "b": "b", "c": "c" },
{ "a": "10", "b": "b", "c": "c" },
{ "a": "11", "b": "b", "c": "c" },
{ "a": "12", "b": "b", "c": "c" },
{ "a": "13", "b": "b", "c": "c" },
{ "a": "14", "b": "b", "c": "c" },
{ "a": "15", "b": "b", "c": "c" },
{ "a": "10", "b": "b", "c": "c" },
{ "a": "11", "b": "b", "c": "c" },
{ "a": "12", "b": "b", "c": "c" },
{ "a": "13", "b": "b", "c": "c" },
{ "a": "14", "b": "b", "c": "c" },
{ "a": "15", "b": "b", "c": "c" },
{ "a": "5", "b": "b", "c": "c" },
{ "a": "6", "b": "b", "c": "c" },
{ "a": "7", "b": "b", "c": "c" },
{ "a": "8", "b": "b", "c": "c" },
{ "a": "9", "b": "b", "c": "c" },
{ "a": "10", "b": "b", "c": "c" },
{ "a": "11", "b": "b", "c": "c" },
{ "a": "12", "b": "b", "c": "c" },
{ "a": "13", "b": "b", "c": "c" },
{ "a": "14", "b": "b", "c": "c" },
{ "a": "15", "b": "b", "c": "c" },
{ "a": "10", "b": "b", "c": "c" },
{ "a": "11", "b": "b", "c": "c" },
{ "a": "12", "b": "b", "c": "c" },
{ "a": "13", "b": "b", "c": "c" },
{ "a": "14", "b": "b", "c": "c" },
{ "a": "15", "b": "b", "c": "c" }
]
}
4:css
<style type="text/css">
.pagesize {
background-color: #0ff;
}
table {
border-collapse: collapse;
}
table tr td {
border: 1px solid black;
}
a {
text-decoration: none;
display:block;
width:40px;
position:relative;
float:left;
font-size:13px;
/*border:1px solid #33CCBD;*/
}
table {
text-align:center;
}
table tbody tr:nth-child(odd) {
background-color:rgba(77,179,138,0.8);
}
#tbl_all thead td{
width:120px;
}
#tbl_all tbody td {
width:120px;
}
#tbl_all tfoot{
text-align:center;
height:40px;
line-height:40px;
}
#tbl2 {
/*line-height:*/
}
</style>
