jquery 采用#pageindex分页

不会封装，凑合用了

app.pageination.js

//总条数，单页条数，翻页ajax
function CreateLinks(total, pageSize, callback) {
    var page_id = ReadUrl("pageindex");//获取url页码
    var page_index = 0;
    if (page_id == "") {
        page_index = 1;
    }
    else {
        page_index = parseInt(page_id);
    }
    var _pageCount = GetPageCount(total, pageSize);//取得总页数


    if (_pageCount == 0 || _pageCount==1) {
        $("#Pagination").empty();
        return;
    }


    var start = 1, end = _pageCount, isstart = false,isend=false;
    if (_pageCount <= 10) {//总页码<=5
        start = 1;
        end = _pageCount;
        
    }
    else if ((_pageCount - page_index) <= 5) {
        start = page_index-5;
        end = _pageCount;
        isstart = true;
    }
    else {
        if (page_index <= 5) {
            start = 1;
            end = page_index + 5;
            isend = true;
        }

        else {
            start = page_index - 5;
            end = page_index + 5;
            isstart = true;
            isend = true;
        }
        
    }

    var links = "";
    if (isstart) {
        if ((start - 1) > 1) {
            links += "<li><a data-index=\"" + (start - 1) + "\">...</a></li>";
        }
       
    }
    for (var i = start; i <= end; i++) {
        //if (page_id <= 5) {
        //    links += "<li><a data-index=\"" + (i-1) + "\">" + i + "</a></li>";
        //}
        if (i == page_index) {
            links += "<li  class=\"active\"><a data-index=\"" + i + "\">" + i + "</a></li>";
        }
        else {
            links += "<li><a data-index=\"" + i + "\">" + i + "</a></li>";
        }
    }
    if (isend) {
        if ((end + 1) <= _pageCount) {
            links += "<li><a data-index=\"" + (end + 1) + "\">...</a></li>";
        }
        
    }



    //前一页
    if (page_index == 1) {
        links = "<li><a disabled=\"disabled\">&lt;</a></li>" + links;
    }
    else {
        links = "<li><a data-index=\"" + (page_index - 1) + "\">&lt;</a></li>" + links;
    }
    //后一页
    if (page_index == _pageCount) {
        links = links + "<li><a disabled=\"disabled\">&gt;</a></li>";
    }
    else {
        links = links + "<li><a data-index=\"" + (page_index + 1) + "\">&gt;</a></li>";
    }

    //第一页
    if (page_index == 1) {
        links = "<li><a disabled=\"disabled\">&lt;&lt;</a></li>" + links;
    }
    else {
        links = "<li><a data-index=\"1\">&lt;&lt;</a></li>" + links;
    }

    //最后一页
    if (page_index == _pageCount) {
        links = links+"<li><a disabled=\"disabled\">&gt;&gt;</a></li>";
    }
    else {
        links = links + "<li><a data-index=\"" + _pageCount+"\">&gt;&gt;</a></li>";
    }

    links = "<ul class=\"new_pagination\">" + links + "</ul>";

    $("#Pagination").empty().html(links);


    $("#Pagination ul li a").click(function () {
        if ($(this).attr("disabled") !="disabled") {
            var index = $(this).attr("data-index");
            WriteUrl("pageindex", index);
            callback();
            //FileList();
           
        }
       
    })
    
}
/**
 * 获取总页码
 * @param {any} total
 * @param {any} pageSize
 */
function GetPageCount(total, pageSize) {
    return Math.ceil(total / pageSize);
}

appurl.js

/**
 * 获取url+#参数改写改写
 */
/*
a:参数
b:参数值
*/
function WriteUrl(a, b) {
    var _url = window.location.hash;
    if (_url == "") {
        window.location.hash = "#" + a + "=" + b;
    }
    else if (_url.indexOf(a) == -1) {
        window.location.hash = _url + "&" + a + "=" + b;
    }
    else {
        var d = "";
        var _urldata = _url.substring(1, _url.length).split('&');
        for (var i = 0; i < _urldata.length; i++) {
            _d = _urldata[i].split('=');
            if (_d[0] == a) {
                d += _d[0] + "=" + b + "&";
            }
            else {
                d += _d[0] + "=" + _d[1] + "&";
            }
        }
        d = d.substring(0, d.length - 1);
        window.location.hash = "#" + d;
    }
}
/*获取url+#参数改写结束*/

function ReadUrl(a) {
    var _url = window.location.hash;
    if (_url != "") {
        var d = "";
        var _urldata = _url.substring(1, _url.length).split('&');
        for (var i = 0; i < _urldata.length; i++) {
            _d = _urldata[i].split('=');
            if (_d[0] == a) {
                d = _d[1];
            }
        }
        return d;
    }
    return "";
}
/**
 * 删除#参数
 * @param {any} a
 */
function DelUrl(a) {
    var _url = window.location.hash;
    if (_url != "") {
        var d = "";
        var _urldata = _url.substring(1, _url.length).split('&');
        for (var i = 0; i < _urldata.length; i++) {
            _d = _urldata[i].split('=');
            if (_d[0] != a) {
                d += _d[0] + "=" + _d[1] + "&";
            }
        }
        d = d.substring(0, d.length - 1);
        window.location.hash = "#" + d;
    }
}

//数据提取.js

var pageIndex = 1, pageSize = 16, pagecount = 1;
var d_list = [], filter_list = [];
function databind() {
    $.ajax({
            url: "****",
            beforeSend: function () {
                $(".card-body").append("<div class=\"loading\"></div>"); $(".loading").show();
            },
            success: function (data) {
                d_list = filter_list = data;
                //filter_list = d_list;
                Search();
                $(".loading").remove();
            }
        })
}
Search = function () {
        WriteUrl("pageindex", 1);
        filter_list = d_list;
        console.log("dd");
        $.each($(".card-search input,.card-search select"), function (c_i, c_t) {
            if ($(c_t).val() != "" && $(c_t).val() != "0") {
                var c_name = $(c_t).attr("id");
                filter_list = filter_list.filter(function (p) {
                    var p_name = p[c_name];

                    
                        return p_name == $(c_t).val()
                    
                })
            }
        })
        PageCall();
    };
 PageCall = function () {

        var pIndex = ReadUrl("pageindex");

        if (pIndex != "") {
            pageIndex = pIndex;
        }
        pageIndex = pageIndex < 1 ? 0 : pageIndex;

        var pStart = (pageIndex - 1) * pageSize;
        var pOver = pageIndex * pageSize;
        pOver = pOver > filter_list.length ? filter_list.length : pOver;

        $("span[data-count-id='count']").html(filter_list.length);
        var html = "";
        for (var i = pStart; i < pOver; i++) {
            var item = filter_list[i];
            html += "<tr>" +
               .....
                "</tr>";
        }
        $("tbody[data-list-id='list']").html(html);
        CreateLinks(filter_list.length, pageSize, PageCall);
    };
$(".card-search input,.card-search select").on("input propertychange", function () {
        Search();
    });

css

.table_pagination {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    height: 40px;
}
    .table_pagination .new_pagination li, .table_pagination .pagination span, .table_pagination .pagination a {
        width: 30px;
        height: 30px;
        margin-right: 5px;
        display: inline-block;
        font-size: 12px;
    }

        .table_pagination .new_pagination li a, .table_pagination .pagination span, .table_pagination .pagination a {
            background-color: #efefef;
            border: 1px solid #efefef;
            display: inline-block;
            color: #8a8a8a;
            border-radius: 50%;
            cursor: pointer;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

            .table_pagination .new_pagination li a:hover, .table_pagination .pagination span:hover, .table_pagination .pagination a:hover {
                background-color: #eee;
                border: 1px solid #2ebcfc;
            }

            .table_pagination .new_pagination li.active a, .table_pagination .pagination span.current {
                background-color: #2ebcfc;
                color: #FFF;
                cursor: default;
            }

            .table_pagination .new_pagination li a[disabled], .table_pagination .pagination span[rel="prev"], .table_pagination .pagination span[rel="next"] {
                opacity: .6;
                color: #000;
                background-color: #efefef;
            }