js分頁類似淘寶

//const
var _RecordCount;
var _PageSize;
var _PageCount;
var _PageStep;
var _CurrentPage = 1;
var _PageCountForMasonry;
var _CurrentPageForMasonry = 1;
var _PageInfoComplete = false;

try { if (!(_RecordCount >= 0)) { _RecordCount = 0; } } catch (ex) { }
try { if (!(_PageSize >= 1)) { _PageSize = 20; } } catch (ex) { }
try { if (!(_PageCount >= 0)) { _PageCount = 0; } } catch (ex) { }
try { if (_PageStep <= 0) { _PageStep = 1; } } catch (ex) { }

var _ToPageBegin = true;

/****************************************************
*
*
*           分頁
*
*
*****************************************************/

function PageData_Complete(json) {
    //alert(json.isHas);
    switch (json.isHas) {
        case "0":
            //沒有找到數據
            try { $("#ajaxPageData").hide(); } catch (ex) { }
            try { $("#ajaxPageInfo").hide(); } catch (ex) { }
            try { $("#ajaxPageLoading").hide(); } catch (ex) { }
            break;
        default:
            var items = "";
            //alert(json);
            var valuedata = eval(unescape(json.ds));
            //alert(valuedata.length);
            items += "";
            for (var i = 0, len = valuedata.length; i < len; i++) {
                //alert(i);
                items += "<li>";
                items += "<a href=\"/shopDetial.aspx?business_id=" + valuedata[i].business_id + "\" target=\"_blank\" class=\"case_title\">";
                items += "<img src=\"/upLoadFile/business/" + valuedata[i].s_photo_url + "\" class=\"thumb\" />";
                if (valuedata[i].isCooperation.replace(/(^\s*)|(\s*$)/g, "") == "1") {
                    items += "<div class=\"hui png\"></div>";
                }
                items += "<div class=\"cover boxcaption\" style=\"top:130px\">";
                items += "<h2>" + valuedata[i].name + "&nbsp;&nbsp;" + valuedata[i].branch_name + "</h2>";
                items += "</div>";
                items += "</a>";
                items += "</li>";
                //alert(valuedata[i].business_id);
            }
            //alert(items);
            $("#ajaxPageData").html(items).show();
            $("#ajaxPageLoading").hide();
            //計算頁碼
            Ajax_GetPageHtmlText("AjaxToPage", _ToPageBegin);
            _boolPageLoading = false;
            break;
    }
}

// 分頁數據顯示
function PageInfo_Complete(result) {
    try {
        var arrPageInfo = result.split(",")
        _RecordCount = arrPageInfo[0];
        _PageCount = arrPageInfo[1];
    } catch (ex) { }
    ToPageAnchor("PageBegin");
    Ajax_GetPageHtmlText("AjaxToPage", _ToPageBegin);
}

// 搜索分頁翻頁
function AjaxToPage(PageType, PageNo, ToPageBegin) {
    //alert(PageType);
    if (PageType == "Up") {
        if (_CurrentPage > 1) { _CurrentPage = _CurrentPage - 1; }
        else { alert('現在已經是第一頁了'); return; }
    } else if (PageType == "Down") {
        if (_CurrentPage < _PageCount) { _CurrentPage = _CurrentPage + 1; }
        else { alert('現在已經是最後一頁了'); return; }
    } else { _CurrentPage = PageNo; }

    //alert(_ToPageBegin);
    Ajax_GetPageHtmlText("AjaxToPage", _ToPageBegin);
    Ajax_GetList(true);

    if (ToPageBegin) {
        ToPageAnchor("PageBegin");
    }
}

function Ajax_GetPageHtmlText(EventObj, ToPageBegin) {
    var obj = $("#ajaxPageInfo");
    if (_PageCount <= 0) {
        obj.hide();
        return;
    }
    obj.show();
    var HtmlText = "";
    //alert(_CurrentPage);
    if (_CurrentPage > 1) {
        HtmlText += "<a href=\"javascript:;\" onclick=\"" + EventObj + "('Page',1," + ToPageBegin + "); return false;\">首頁</a><a href=\"javascript:;\" onclick=\"" + EventObj + "('Up',1," + ToPageBegin + ");\">上一頁</a>";
    }
    else {
        HtmlText += "<a class=\"UnUpPage\">首頁</a><a href=\"javascript:;\" class=\"UnUpPage\">上一頁</a>";
    }
    var PageNumI = 1;
    if (_PageCount > 8) {
        if (_CurrentPage > 3) {
            if (_PageCount - _CurrentPage < 6) {
                PageNumI = _PageCount - 7;
            } else {
                PageNumI = _CurrentPage - 2;
            }
        }
    }

    for (var i = PageNumI; i < PageNumI + 8 && i <= _PageCount; i++) {
        if (i == _CurrentPage) {
            HtmlText += "<a class=\"FlipCurrent\">" + i + "</a>";
        }
        else {
            HtmlText += "<a href=\"javascript:;\" onclick=\"" + EventObj + "('Page'," + i + "," + ToPageBegin + "); return false;\">" + i + "</a>";
        }
    }
    if (_CurrentPage < _PageCount) {
        HtmlText += "<a href=\"javascript:;\" onclick=\"" + EventObj + "('Down',1," + ToPageBegin + ");\">下一頁</a>";
    } else {
        HtmlText += "<a class=\"UnUpPage\">下一頁</a>";
    }

    obj.html(HtmlText);
}

function ToPageAnchor(ID) {
    try {
        $('html,body').scrollTop($('#' + ID).offset().top - 100);
    } catch (ex) { }
}

//調用

 PageInfo_Complete(json.RecordCount + "," + json.PageCount);    //PageCount爲總頁數    
        PageData_Complete(json)

//前臺頁面

<div id=" ajaxPageInfo"> </div>