JQuery+Ajax無重新整理分頁的執行個體代碼

JQuery+Ajax無重新整理分頁的執行個體代碼_jquery

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

先看效果圖：

實現原理很簡單，使用了jquery.pagination這個外掛程式，每當點擊頁碼時非同步去伺服器去取該頁的資料，簡單介紹如下：
一、資料庫表結構：很簡單就四個欄位分別是News_id News_title News_time News_readtimes

二、前台頁面代碼：

複製代碼代碼如下:

<head runat="server">
    <title>JQuery無重新整理分頁</title>
    <link href="Styles/common.css" rel="stylesheet" type="text/css" />
    <link href="Styles/paging.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jquery.pagination.js" type="text/javascript"></script>
    <script type="text/javascript">
    var pageIndex = 0;
    var pageSize = 3;

    $(function() {
        InitTable(0);

        $("#Pagination").pagination(<%=pageCount %>, {
            callback: PageCallback,
            prev_text: '上一頁',
            next_text: '下一頁',
            items_per_page: pageSize,
            num_display_entries: 6,//連續分頁主體部分分頁條目數
            current_page: pageIndex,//當前頁索引
            num_edge_entries: 2//兩側首尾分頁條目數
        });

        //翻頁調用
        function PageCallback(index, jq) {
            InitTable(index);
        }

        //請求資料
        function InitTable(pageIndex) {
            $.ajax({
                type: "POST",
                dataType: "text",
                url: 'Ajax/PagerHandler.ashx',
                data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
                success: function(data) {
                    $("#Result tr:gt(0)").remove();//移除Id為Result的表格裡的行，從第二行開始（這雷根據頁面配置不同頁變）
                    $("#Result").append(data);//將返回的資料追加到表格
                }
            });
        }
    });
    </script>
</head>

複製代碼代碼如下:

三、頁面後台檔案

這裡主要是擷取記錄總數：

複製代碼代碼如下:

public string pageCount = string.Empty;//總條目數

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                pageCount = new News().GetNewsCount();
            }
        }

四、最主要的是ajax處理常式：PagerHandler.ashx

複製代碼代碼如下:

public class PagerHandler : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string str = string.Empty;
            int pageIndex = Convert.ToInt32(context.Request["pageIndex"]);
            int size = Convert.ToInt32(context.Request["pageSize"]);
            if (pageIndex == 0)
            {
                pageIndex = 1;
            }
            int count = 0;

            News n = new News();
            List<News> list = n.GetNewsList(pageIndex, size, ref count);
            StringBuilder sb = new StringBuilder();
            foreach (News p in list)
            {
                sb.Append("<tr><td>");
                sb.Append(p.News_id);
                sb.Append("</td><td>");
                sb.Append("<a href='#'>"+p.News_title+"</a>");
                sb.Append("</td><td>");
                sb.Append(p.News_time);
                sb.Append("</td><td>");
                sb.Append(p.News_readtimes);
                sb.Append("</td></tr>");
            }
            str = sb.ToString();
            context.Response.Write(str);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More