jquery+json實(shí)現(xiàn)分頁(yè)效果

字號(hào):


    Json作為一種輕量級(jí)的數(shù)據(jù)交換格式,由于其傳輸數(shù)據(jù)格式的方便性,今天偶然想將其應(yīng)用于分頁(yè)實(shí)現(xiàn),分頁(yè)做為web開(kāi)發(fā)一個(gè)長(zhǎng)久的話題,其應(yīng)用的高效與重要性就不多說(shuō)了
    本文主要技術(shù):反射機(jī)制,Json數(shù)據(jù)格式,jquery
    為了應(yīng)用的通用性,首先要根據(jù)反射機(jī)制,能將要返回的任意類型的結(jié)果對(duì)象轉(zhuǎn)化成Json類型的格式。
    public static String toJSON(Object obj) {
    HashMap map = new HashMap();
    Class c = obj.getClass();
    // 利用反射機(jī) 制,把里面所有的屬性,反射出來(lái)使用,這樣放入任何一個(gè)對(duì)象, 都可以找到他們的屬性,
    // 把這些屬性的名,和屬性的值,封裝成一個(gè)map里,
    Field[] fields = c.getDeclaredFields();
    for (int i = 0; i < fields.length; i++) {
    String name = fields[i].getName();
    try {
    fields[i].setAccessible(true);
    Object o = fields[i].get(obj);
    i f (o instanceof Number) {
    map.put(""" + name + """, o.toString());
    } else if (o instanceof String) {
    map.put(""" + name + """, """ + o.toString() + """);
    }
    } catch (IllegalArgumentException e) {
    } catch (IllegalAccessException e) {
    }
    }
    / / 把map對(duì)象變成字符串
    // 這些格式還需要把=變成:
    String s = map.toString();
    / /System.out.println(s);
    String str = s.replaceAll(""=", "":");
    //System.out.println(str);
    return str;
    }
    將要返回的多個(gè)對(duì)象轉(zhuǎn)換成Json類型的對(duì)象后,最后應(yīng)加上分頁(yè)的信息,最終將多個(gè)Json字符串,轉(zhuǎn)化成一整個(gè)Json類型
    {"0":{"id":"0", "name":"dong0", "age":21},
    "1":{"id":"1", "name":"dong1", "age":21},
    "2":{"id":"2", "name":"dong2", "age":21},
    "3":{"id":"3", "name":"dong3", "age":21},
    "4":{"id":"4", "name":"dong4", "age":21},
    "5":{"id":"5", "name":"dong5", "age":21},
    "6":{"id":"6", "name":"dong6", "age":21},
    "7":{"id":"7", "name":"dong7", "age":21},
    "8":{"id":"8", "name":"dong8", "age":21},
    "9":{"id":"9", "name":"dong9", "age":21},
    "10":{"firstPage":1, "currentPage":1,
    "default_Record_Num":10, "lastPage":10, "frontPage":1, "sum":100, "nextPage":2},
    "length":11}
    當(dāng)信息發(fā)送到客戶端時(shí) ,只用jquery接收對(duì)象的數(shù)據(jù)就行了 ,這樣 可以實(shí)現(xiàn)前臺(tái)的樣式與后臺(tái)傳送的數(shù)據(jù)分離,更加簡(jiǎn)化了代碼
    $.getJSON("result.jsp?page="+p, function(json)
    {
    $("#show").html("<tr><th>用戶ID</th><th>用戶名</th><th>用戶年齡</th></tr>");
    for(var i=0 ; i<json.length-1; i++){
    $("#show").append("<tr><td>"+json[i]["id"]+"</td><td>"+json[i]["name"]+"</ td><td>"
    +json[i]["age"]+"</td></tr>");
    }
    $("#currentPage").attr("value",json[json.length-1]["currentPage"]);
    $("#pageCount").attr("value",json[json.length-1]["lastPage"]);
    });
    利用JQuery與JSon實(shí)現(xiàn)的無(wú)刷新分頁(yè)代碼,具體代碼如下
    需要四個(gè)文件
    一個(gè)實(shí)體類文件 CategoryInfoModel.cs
    一個(gè)SqlHelper SQLHelper.cs
    一個(gè)AJAX服務(wù)端處理程序 PagedService.ashx
    一個(gè)客戶端調(diào)用頁(yè)面 WSXFY.htm
    CategoryInfoModel.cs和SQLHelper.cs我就不寫了,都知道是什么文件
    PagedService.ashx 代碼如下
    using System.Web.Script.Serialization;
    public void ProcessRequest(HttpContext context)
    {
    context.Response.ContentType = "text/plain";
    string strAction = context.Request["Action"];
    //取頁(yè)數(shù)
    if (strAction == "GetPageCount")
    {
    string strSQL = "SELECT COUNT(*) FROM CategoryInfo";
    int intRecordCount = SqlHelper.ExecuteScalar(strSQL);
    int intPageCount = intRecordCount / 10;
    if (intRecordCount % 10 != 0)
    {
    intPageCount++;
    }
    context.Response.Write(intPageCount);
    }//取每頁(yè)數(shù)據(jù)
    else if (strAction == "GetPageData")
    {
    string strPageNum = context.Request["PageNum"];
    int intPageNum = Convert.ToInt32(strPageNum);
    int intStartRowIndex = (intPageNum - 1) * 10 + 1;
    int intEndRowIndex = (intPageNum) * 10 + 1;
    string strSQL = "SELECT * FROM ( SELECT ID,CategoryName,Row_Number() OVER(ORDER BY ID ASC) AS rownum FROM CategoryInfo) AS t";
    strSQL += " WHERE t.rownum >= " + intStartRowIndex + " AND t.rownum <= " + intEndRowIndex;
    DataSet ds = new DataSet();
    SqlConnection conn = SqlHelper.GetConnection();
    ds = SqlHelper.ExecuteDataset(conn, CommandType.Text, strSQL);
    List<CategoryInfoModel> categoryinfo_list = new List<CategoryInfoModel>();//定義實(shí)體集合
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
    {
    CategoryInfoModel categoryinfo = new CategoryInfoModel();
    categoryinfo.CategoryInfoID = Convert.ToInt32(ds.Tables[0].Rows[i]["ID"]);
    categoryinfo.CategoryName = ds.Tables[0].Rows[i]["CategoryName"].ToString();
    categoryinfo_list.Add(categoryinfo);
    }
    JavaScriptSerializer jss = new JavaScriptSerializer();
    context.Response.Write(jss.Serialize(categoryinfo_list));//序列化實(shí)體集合為javascript對(duì)象
    }
    }
    WSXFY.htm 代碼如下
    <head>
    <title>無(wú)刷新分頁(yè)</title>
    <script type="text/javascript" src="../Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    $(function () {
    $.post("PagedService.ashx", { "Action": "GetPageCount" }, function (response, status) {
    for (var i = 1; i <= response; i++) {
    var td = $("<td><a href=''>" + i + "</a></td>");
    $("#trPage").append(td);
    td.click(function (e) {
    e.preventDefault(); //不要導(dǎo)向鏈接
    $.post("PagedService.ashx", { "Action": "GetPageData", "PageNum":$(this).text() }, function (response, status) {
    var categorys = $.parseJSON(response);
    $("#ulCategory").empty();
    for (var i = 0; i < categorys.length; i++) {
    var category = categorys[i];
    var li = $("<li>" + category.CategoryInfoID + "-" + category.CategoryName + "</li>");
    $("#ulCategory").append(li);
    }
    });
    });
    }
    });
    });
    </script>
    </head>
    <body>
    <ul id="ulCategory"></ul>
    <table>
    <tr id="trPage">
    </tr>
    </table>
    </body>
    </html>
    以上就是本文的全部?jī)?nèi)容,希望能夠幫助大家實(shí)現(xiàn)分頁(yè)效果。