快捷導(dǎo)航

JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼

更新時(shí)間：2014年02月08日 09:19:51 作者：

本篇文章主要是對(duì)JQuery+Ajax無(wú)刷新分頁(yè)的實(shí)例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助

先看效果圖：

實(shí)現(xiàn)原理很簡(jiǎn)單，使用了jquery.pagination這個(gè)插件，每當(dāng)點(diǎn)擊頁(yè)碼時(shí)異步去服務(wù)器去取該頁(yè)的數(shù)據(jù)，簡(jiǎn)單介紹如下：
一、數(shù)據(jù)庫(kù)表結(jié)構(gòu)：很簡(jiǎn)單就四個(gè)字段分別是News_id News_title News_time News_readtimes

二、前臺(tái)頁(yè)面代碼：

復(fù)制代碼代碼如下:

<head runat="server">
    <title>JQuery無(wú)刷新分頁(yè)</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: '上一頁(yè)',
            next_text: '下一頁(yè)',
            items_per_page: pageSize,
            num_display_entries: 6,//連續(xù)分頁(yè)主體部分分頁(yè)條目數(shù)
            current_page: pageIndex,//當(dāng)前頁(yè)索引
            num_edge_entries: 2//兩側(cè)首尾分頁(yè)條目數(shù)
        });

        //翻頁(yè)調(diào)用
        function PageCallback(index, jq) {
            InitTable(index);
        }

        //請(qǐng)求數(shù)據(jù)
        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的表格里的行，從第二行開(kāi)始（這里根據(jù)頁(yè)面布局不同頁(yè)變）
                    $("#Result").append(data);//將返回的數(shù)據(jù)追加到表格
                }
            });
        }
    });
    </script>
</head>

復(fù)制代碼代碼如下:

<form id="form1" runat="server">
    <center>
        <table id="Result" border="1" cellpadding="5" style="border-collapse: collapse; margin:20px;
            border: solid 1px #85A8BE;width:60%">
            <tr>
                <th style="width: 10%">
                    ID
                </th>
                <th style="width: 60%">
                    標(biāo)題
                </th>
                <th style="width: 20%">
                    更新時(shí)間
                </th>
                <th style="width: 10%">
                    點(diǎn)擊量
                </th>
            </tr>
        </table>
        <div id="Pagination" class="paging">
        </div>
    </center>
    </form>

三、頁(yè)面后臺(tái)文件

這里主要是獲取記錄總數(shù)：

復(fù)制代碼代碼如下:

public string pageCount = string.Empty;//總條目數(shù)

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

四、最主要的是ajax處理程序：PagerHandler.ashx

復(fù)制代碼代碼如下:

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);
        }