利用Linq + Jquery + Ajax 异步分页的实现

2022-11-29 09:50:57

在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="data:images/edt.gif" width="16" height="16" />编辑   <img src="data: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="data:images/first.gif" class="page" title ="first" width="37" height="15" /></td>
                  <td width="45"><img src="data:images/back.gif" class="page" title ="back" width="43" height="15" /></td>
                  <td width="45"><img src="data:images/next.gif" class="page" title ="next" width="43" height="15" /></td>
                  <td width="40"><img src="data: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="data: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);　//把返回来的数据　ｊｓｏｎ
                    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);
            }
        }

好了，到此，大功告成，后续会把批量删除（批量删除后的页面变化等等加入），

码农公寓

相关文章