jquery table分页【终极版2】分页位置在table外

1js

$.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页 就全部显示出来
pagesizing_a += "<a href='javascript:void(0)'style='background-color:#3CC480;color:white' >1</a>";
for (var i = 2; 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=''>跳转</a>";
}
//不同的表格设置跨列的值<tr><td colspan='3' style=''>" "</td></tr>"
pagesizing_html += "&" + pagesizing_a;//用&区分开显示内容与分页数
return pagesizing_html;
}
});

$(function () {

})

$.fn.extend({
aClick: function (returnJson, psize, this_parentID_new) {//读取的json 每页条数 显示分页的id
var this_parentId = $(this).parent().attr("id");//
var pagesiziing_a1 = 1;
var pagesiziing_a = 1;

$("#" + this_parentID_new).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|| $("#pagesizing_num").val() == "") { 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_new + "_1").empty();
$("#" + this_parentID_new + "_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_new).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='" + pagesiziing_a + "' min='1' max='" + pagesizing_pagesizes + "' style='width:40px;' id='pagesizing_num'/>";
new_a += "<a href='javascript:void(0)' style=''>跳转</a>";
$("#" + this_parentID_new).append(new_a);
//改变点击的a的背景色
}
else if ((pagesiziing_a + 2) > (p - 1)) {
$("#" + this_parentID_new).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='" + pagesiziing_a + "' min='1' max='" + pagesizing_pagesizes + "' style='width:40px;' id='pagesizing_num'/>";
new_a += "<a href='javascript:void(0)' style=''>跳转</a>";
$("#" + this_parentID_new).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_new).children("a").eq((to_Change)).css({ "background-color": "#3CC480", "color": "white" });
}
else if (pagesiziing_a < 5) {
$("#" + this_parentID_new).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='" + pagesiziing_a + "' min='1' max='" + pagesizing_pagesizes + "' style='width:40px;' id='pagesizing_num'/>";
new_a += "<a href='javascript:void(0)' style=''>跳转</a>";
$("#" + this_parentID_new).append(new_a);
$("#" + this_parentID_new).children("a").eq((pagesiziing_a)).css({ "background-color": "#3CC480", "color": "white" });
}
}
else {//小于9页

$(this).css({ "background": "#3CC480", "color": "white" }).siblings().css({ "background": "white", "color": "black" });
}
});
}
})

　　2:css

  * {
        margin:0;
        padding:0;
        color:black;
        }
        .pagesize {
            background-color: #0ff;
        }

        table {
            border-collapse: collapse;
        }

            table tr td {
                border: 1px solid black;
            }

        a {
            text-decoration: none;
            display:inline-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;
        }

　　3：html

<div style="width:1000px;margin:0 auto;border:1px solid black">
    <table style="margin: 0 auto" id="tbl_all">
        <thead>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>班级</td>
            </tr>
        </thead>
        <tbody id="tbl22_1">
        </tbody>    
    </table>
    <!--显示分页位置-->
    <div id="tbl22" style="margin:0 auto;text-align:center;"></div>
        <br />
   </div>

　　4:js

 var pagesize = 3;//每一页显示的条数
        var begin = 0;//记录开始行
        var end = 0;//记录结束行
        $(function () {
            
            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" }
                ]
            }
            var returnJson = [
                { "a": "1", "b": "b", "c": "c" },
                { "a": "2", "b": "b", "c": "c" },
                { "a": "3", "b": "b", "c": "c" },
                { "a": "4", "b": "b", "c": "c" },
                { "a": "5", "b": "b", "c": "c" },
                { "a": "6", "b": "b", "c": "c" },
                { "a": "7", "b": "b", "c": "c" }
            ];
            var returnJson1 = [
               { "a": "21", "b": "b", "c": "c" },
               { "a": "22", "b": "b", "c": "c" },
               { "a": "23", "b": "b", "c": "c" },
               { "a": "24", "b": "b", "c": "c" },
               { "a": "25", "b": "b", "c": "c" },
               { "a": "26", "b": "b", "c": "c" },
               { "a": "27", "b": "b", "c": "c" },
               { "a": "23", "b": "b", "c": "c" },
               { "a": "24", "b": "b", "c": "c" },
               { "a": "25", "b": "b", "c": "c" }


            ];
            $("#btn").click(function () {
                //显示第一页、分页 参数(开始位置，结束位置[首次调用传每页条数]，读取json，每页条数)
                $("#tbl22_1").empty();
                $("#tbl22_1").append($.pageing(begin, pagesize, newJson.name, pagesize).split("&")[0]);//table的tbody
                $("#tbl22").append($.pageing(begin, pagesize, newJson.name, pagesize).split("&")[1]);//tbody的tfoot
                //点击分页事件tfoot  参数（json,每页条数）
                $("#tbl22").aClick(newJson.name, pagesize,"tbl22");
            });                           
        })

　　5:使用规则

显示数据得table的tbody的id是显示分页的id_1