利用Linq+Jquery+Ajax異步分頁的實現

2019-11-14 16:42:31

字體：大中小

來源：轉載

供稿：網友

在Web顯示的時候我們經常會遇到分頁顯示，而網上的分頁方法甚多，但都太過于消耗帶寬，所以我想到了用Ajax來分頁，利用返回的Json來處理返回的數據，

大大簡化了帶寬的壓力。

先說下思路，無非就是異步執行ajax 把新列表所需要的數據用json格式返回來，然后把原來的列表Remove掉，讓新列表Show。

上前臺Html代碼：

<table width="100%" border="0" cellpadding="0" id = "newslist" cellspacing="1" bgcolor="b5d6e6">
            <asp:Repeater ID="Repeater1" runat="server">
            <HeaderTemplate>
            <tr>
            <td width="15%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center">
             <a id="quan">全選</a>
            <a id="fan">反選</a>
            </div></td>
             <td width="12%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">接收號碼</span></div></td>
            <td width="14%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">發送時間</span></div></td>
            <td width="18%" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">郵件地址</span></div></td>
            <td width="23%" height="22" background="images/bg.gif" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">內容</span></div></td>
            <td width="15%" height="22" background="images/bg.gif" bgcolor="#FFFFFF" class="STYLE1"><div align="center">基本操作</div></td>
          </tr>
            </HeaderTemplate>
           <ItemTemplate>
             <tr class="item">
            <td height="20" bgcolor="#FFFFFF"><div align="center">
              <input class ="check_select" type="checkbox" name="checkbox2" title =<%#Eval("Id")%> value="checkbox" />
            </div></td>
            <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1"><%#Eval("Name")%></span></div></td>
            <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">2007-11-16 15:00:20 </span></div></td>
            <td bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">tiezhu0902@163.com</span></div></td>
            <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE1">南京科技股份有限公司…</span></div></td>
            <td height="20" bgcolor="#FFFFFF"><div align="center"><span class="STYLE4"><img src="images/edt.gif" width="16" height="16" />編輯   <img src="images/del.gif" width="16" height="16" />刪除</span></div></td>
          </tr>
           </ItemTemplate>
            </asp:Repeater>
        </table>

            </td>
             <td class="STYLE4">共有<asp:Label ID="Count" runat="server" Text=""></asp:Label>條數據，
             每頁顯示<asp:Label ID="ItemCount" runat="server" Text=""></asp:Label>條，
             當前<asp:Label ID="index" runat="server" Text=""></asp:Label>
             /
             <asp:Label ID="PageCount" runat="server" Text=""></asp:Label>
             頁

            </td>
            <td><table border="0" align="right" cellpadding="0" cellspacing="0">
                <tr>
                  <td width="40"><img src="images/first.gif" class="page" title ="first" width="37" height="15" /></td>
                  <td width="45"><img src="images/back.gif" class="page" title ="back" width="43" height="15" /></td>
                  <td width="45"><img src="images/next.gif" class="page" title ="next" width="43" height="15" /></td>
                  <td width="40"><img src="images/last.gif" class="page" title ="last" width="37" height="15" /></td>
                  <td width="100"><div align="center"><span class="STYLE1">轉到第
                      <asp:DropDownList ID="Drop" runat="server">
                      </asp:DropDownList>
                    頁 </span></div></td>
                  <td width="40"><img class="page" title = "go" src="images/go.gif" width="37" height="15" /></td>
                </tr>
            </table>
            </td>
          </tr>
        </table>

好了，初步的html頁面布局已經做完了，下來我們該做頁面和服務器的交互了

頁面引入Jquery，為上一頁，下一頁，首頁，尾頁，增加Click事件

設置他們的Class = page 以便于給他們增加Click

$(".page").click(function () {
                var type = $(this).attr("title");
                var thisindex = $("#index").text(); //獲取當前頁碼
                switch (type) {
                    case 'first':
                        {
                            pageindex = 1;
                            PageIndex(1);  //Ajax 回傳函數
                            return;
                        }
                    case 'back':
                        {
                            if (thisindex == 1) {
                                alert("當前已經是第一頁！");
                            }
                            else {
                                pageindex = parseInt(thisindex) - 1;
                                PageIndex(pageindex);
                            }
                            return;
                        }
                    case 'next':
                        {
                            if (thisindex == $("#Drop").children().length) {
                                alert("當前已經是最后頁！");
                            }
                            else {
                                pageindex = parseInt(thisindex) + 1;
                                PageIndex(pageindex);
                            }
                            return;
                        }
                    case 'last':
                        {
                            var max = $("#Drop").children().length;
                            pageindex = max;
                            PageIndex(max);
                            return;
                        }
                    case 'go':
                        {
                            var _go = $("#Drop").val();
                            pageindex = _go;
                            PageIndex(_go);
                            return;
                        }
                }

})

下面的代碼在是Ajax的回傳封裝，切記在$(function(){ ....})之外

var pageindex;
        function PageIndex(index) {
            $.ajax({
                type: "Post", //回傳格式
                url: "WebForm1.aspx", //回傳頁面
                data: { "id": index },  //回傳參數表示請求的是第幾頁
                cache: false,　//禁止使用瀏覽器緩存
                //dataType: "json",
                success: function (data) {
                    var json = eval(data);　//把返回來的數據?。辏螅铮?/span>
                    var str = "";
                    for (var i = 0; i < json.items.length - 1; i++) {
                        str = str + "<tr class='item' ><td height='20' bgcolor='#FFFFFF'><div align='center'><input class ='check_select' type='checkbox' name='checkbox2' title =" + json.items[i].id.toString() + " value='checkbox' /></div></td>";
                        str = str + "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>" + json.items[i].name + "</span></div></td><td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>2007-11-16 15:00:20 </span></div></td>";
                        str = str + "<td bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>tiezhu0902@163.com</span></div></td><td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE1'>南京科技股份有限公司…</span></div></td>";
                        str = str + "<td height='20' bgcolor='#FFFFFF'><div align='center'><span class='STYLE4'><img src='images/edt.gif' width='16' height='16' />編輯   <img src='images/del.gif' width='16' height='16' />刪除</span></div></td></tr>";
                    }
                    $("#index").text(pageindex);　//設置當前的頁碼
                    $(".item").remove();　//移除原有的列表
                    $("#newslist").append(str);　//顯示返回的列表
                },
                error: function () {
                    alert("服務錯誤");
                }
            })
        }

下面才Ｃ＃代碼了：

void data(int id,bool b)
        {
            int listcount = 7;　//設置頁面的顯示數量
            LinqToSqlDataContext ds = new LinqToSqlDataContext();
            var q = (from a in ds.Admin select a).Skip((id-1) * listcount).Take(listcount); //獲取請求頁面的列表
            if (!b)  //如果是頁面初始加載默認顯示
            {
                Repeater1.DataSource = q;
                DataBind();
                int count = (from a in ds.Admin select a).ToList().Count;
                this.Count.Text = count.ToString();
                count = count / listcount + (count % listcount > 0 ? 1 : 0);
                this.ItemCount.Text = listcount.ToString();
                this.index.Text = "1";
                this.PageCount.Text = count.ToString();
                for (int i = 0; i < count; i++)
                {
                    Drop.Items.Add((i + 1).ToString());
                }
            }
            else
            {
                string str = "({items:[";
                foreach (var a in q)
                {
                    str += "{'id':'" + a.Id + "'";
                    str += ",'name':'" + a.Name+"'";
                    str += "},";
                }
                str += "]})";
                Response.Write(str);
                Response.End();
            }
        }
        PRotected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                data(1,false);
            }
            PageIndex();
        }
        void PageIndex()
        {
            if (Request["id"] != null)
            {
                int id = int.Parse(Request["id"].ToString());
                data(id,true);
            }
        }