分頁實現前五後五ajax區域性重新整理方式分頁實現

分頁實現前五後五ajax區域性重新整理方式分頁實現

效果如本站：http://www.80iter.com/blog 的分頁

1、底層分頁程式碼

/// <summary>
/// 分頁
/// </summary>
/// <param name="currentPageStr">當前頁</param>
/// <param name="totalItems">資料總和</param>
/// <param name="totalPages">資料總頁數</param>
/// <param name="pages">分頁頁碼，超過頁碼後顯示</param>
/// <param name="blnJs">分頁採用的方法 true：JS   false：URL拼接</param>
/// <param name="strUrl">分頁的URL</param>
/// <returns></returns>
public static string GetHtmlPager(long currentPageStr, long totalItems, 
    long totalPages, long pages, bool blnJs, string strUrl)
{
    string URL = string.Empty;

    if (blnJs)
    {
        URL = " href=\"javascript:ajaxList('{0}')\"";
    }
    else
    {
        URL = " href=\"" + strUrl + "/{0}\"";
    }

    //預設當前頁是第一頁
    long currentPage = 1;
    if (currentPageStr != 0)
    {
        currentPage = currentPageStr;
    }

    long temp = pages / 2;

    var output = new StringBuilder();

    if (totalItems > 0)
    {
        long previous = (currentPage - 1) >= 1 ? (currentPage - 1) : 1;
        long next = currentPage + 1 <= totalPages ? (currentPage + 1) : totalPages;

        output.Append("<div class=\"fy\">");
        output.Append("<div class=\"fy1-1\">");
        output.Append("<ul>");

        if (totalPages <= 1 || currentPage == 1)
        {
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\">首頁</a>&nbsp;</li>");
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\">上一頁</a>&nbsp;</li>");
        }
        else
        {
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\" " 
                + string.Format(URL, 1) + ">首頁</a>&nbsp;</li>");
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\" " 
                + string.Format(URL, previous) + ">上一頁</a>&nbsp;</li>");
        }
         
        long startIndex = currentPage - temp;
        if (startIndex + pages > totalPages)
            startIndex = totalPages + 1 - pages;
        if (startIndex < 1)
            startIndex = 1;
         
        long endIndex = startIndex + pages - 1;
        if (endIndex > totalPages)
            endIndex = totalPages;

        output.Append("<li>&nbsp;");
        for (long i = startIndex; i <= endIndex; i++)
        {
            if (i == currentPage)
            {
                output.Append("<a " + string.Format(URL, i) + " class=\"fya2\">" + i + "</a>&nbsp;");
            }
            else
            {
                output.Append("<a " + string.Format(URL, i) + " class=\"fya1\">" + i + "</a>&nbsp;");
            }
        }
        output.Append("</li>");

        if (totalPages <= 1 || currentPage == totalPages)
        {
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\">下一頁</a>&nbsp;</li>");
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\">末頁</a>&nbsp;</li>");
        }
        else
        {
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\" " 
                + string.Format(URL, next) + ">下一頁</a>&nbsp;</li>");
            output.Append("<li>&nbsp;<a style=\"font-weight: bold\" " 
                + string.Format(URL, totalPages) + ">末頁</a>&nbsp;</li>");
        }

        output.Append("<li>&nbsp;共有" + totalItems + "條記錄，當前第" 
            + currentPage + "/" + totalPages + "頁</li>");

        output.Append("</ul>");
        output.Append("</div>");
        output.Append("</div>");
    }

    return output.ToString();
}

如程式碼所示，我寫的這個是ajax非同步呼叫實現的分頁，所以在web頁面需要ajax呼叫ajaxList方法進行分頁

2、web頁面ajax方法

var page = 1;
var SearchParam = ""; //查詢引數
function ajaxList(currentpage) {
    if (currentpage != null) {
        page = currentpage;
    }
    //處理查詢引數
    SearchByConditions();
    if (SearchParam == undefined || SearchParam == "") {
        SearchParam = '';
    }
    $.ajax({
        type: "GET",
        dataType: "",
        data: SearchParam,
        url: "/xx/xx?time=" + (new Date().getTime()),
        error: function (XmlHttpRequest, textStatus, errorThrown) { },
        success: function (d) {
            $("#tableinfo").html("");
            $("#tableinfo").html(d);
        }
    });
}
//拼接查詢條件
function SearchByConditions() {
    SearchParam = "&page=" + page + "&x=" + $("#x").val();
    return SearchParam;
}

3、底層分頁程式碼

4、效果展示

內容均為作者獨立觀點，不代表八零IT人立場，如涉及侵權，請及時告知。