Jquery异步分页

时间：2010-09-17 来源：mjsky

1.实体类（模拟数据源）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

/// <summary>
///People 的摘要说明
/// </summary>
public class People
{

public int id { get; set; }
public string name { get; set; }
}
public class DB
{

private List<People> peoples = new List<People>()
    {

        new People(){id=1,name="1"},
        new People(){id=2,name="2"},
         new People(){id=3,name="3"},
          new People(){id=4,name="4"},
           new People(){id=5,name="5"},
            new People(){id=6,name="6"},
             new People(){id=7,name="7"},
              new People(){id=8,name="8"},
              new People(){id=9,name="9"},
               new People(){id=10,name="10"}

    };
    public List<People> GetPeoples()
    {
        return peoples;
    }

2.一般性处理文件

（1）.Handler.ashx（用于分页）

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Configuration;
public class Handler : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
       int id =Convert.ToInt16(context.Request.QueryString["id"]);
     //  string comamnd = context.Request.QueryString["p"];
    
        int page = Convert.ToInt16(ConfigurationManager.AppSettings["page"]);
        int min = (id - 1) * page + 1;
        int max = id * page;
        string result="";
        People p=null;
        try
        {
            for (int i = min; i <= max; i++)
            {
                p = new DB().GetPeoples()[i - 1];
                result += p.id + "," + p.name + ":";
            }
            result = result.Substring(0, result.Length - 1);
        }
        catch(Exception )
        {
            result = ""; 
              int count=new DB().GetPeoples().Count;
                if (count<= max)
                {
                    for (int i = min; i <= count; i++)
                    {
                        p = new DB().GetPeoples()[i - 1];
                        result += p.id + "," + p.name + ":";
                    }
                    result = result.Substring(0, result.Length - 1); 
                }
              
                
            }
          
        
        context.Response.Write(result);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

(2).用于获得最后一页的索引

<%@ WebHandler Language="C#" Class="GetMaxRow" %>

using System;
using System.Web;
using System.Configuration;
public class GetMaxRow : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //获取最后一页的页数
        int maxRow = (new DB().GetPeoples().Count - 1) / Convert.ToInt16(ConfigurationManager.AppSettings["page"]) + 1;
        context.Response.Write(maxRow);
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

3.前台界面和Jquery代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
</head>
<body>
    <table id="table1" style="width:200px">
        <thead>
            <td style="width:80px">
                id
            </td>
            <td style="width:80px">
                name
            </td>
          
        </thead>
        <tbody>
        </tbody>
    </table>

    <input id="previce" disabled="disabled" type="button" value="上一页" /><input id="next" type="button"
        value="下一页" />
</body>
</html>
<script type="text/javascript">
    var id = 1;
    var maxPage1 = 0;

    var fun = function () {
     
        $("tbody").empty(); //清除tr 这地方花了我不少时间
        $.get("Handler.ashx", { "id": id }, function (data) {
           
            var arr = data.toString().split(":");
            //遍历arr数组
            $.each(arr, function (index, entry) {
                //index表示该项在数组的索引，entry代表的数组中的一项  也就是索引为index的那一项
                var trr = $("<tr></tr>").attr("id", "a" + index).appendTo("tbody");
                var arr1 = entry.toString().split(",");
                //同上
                $.each(arr1, function (index1, entry1) {
                    $("<td></td>").append(entry1).appendTo(trr);
                })
            })

        });
    }
    var fun1 = function () {

        $.get("GetMaxRow.ashx", function (data) {
            maxPage1 = data - 0;
            fun();//这么做的目的是为了同步，这个也花了我不少时间
            fun3();

        })

    }
    $(function () {
        fun1();
   
    })
    var fun3 = function () {

        $("#next").click(function () {
            $("#previce").removeAttr("disabled");
            id = id + 1;
            if (id == 3) {
                $("#next").attr("disabled", "disabled");
            }
            fun();

        })
        $("#previce").click(function () {

            $("#next").removeAttr("disabled");
            id = id - 1;
            fun();
            if (id == 1) {
            
                $("#previce").attr("disabled", "disabled");
            }

        })
    }
   
</script>