zoukankan      html  css  js  c++  java
  • jquery+json实现分页效果

    son作为一种轻量级的数据交换格式,由于其传输数据格式的方便性,今天偶然想将其应用于分页实现,分页做为web开发一个长久的话题,其应用的高效与重要性就不多说了
    本文主要技术:反射机制,Json数据格式,jquery
    为了应用的通用性,首先要根据反射机制,能将要返回的任意类型的结果对象转化成Json类型的格式。

    public static String toJSON(Object obj) {
    HashMap map = new HashMap();
    Class c = obj.getClass();
    // 利用反射机 制,把里面所有的属性,反射出来使用,这样放入任何一个对象, 都可以找到他们的属性,
    // 把这些属性的名,和属性的值,封装成一个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对象变成字符串
    // 这些格式还需要把=变成:
    String s = map.toString();
    / /System.out.println(s);
    String str = s.replaceAll(""=", "":");
    //System.out.println(str);
    return str;
    }
    将要返回的多个对象转换成Json类型的对象后,最后应加上分页的信息,最终将多个Json字符串,转化成一整个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}
    当信息发送到客户端时 ,只用jquery接收对象的数据就行了 ,这样 可以实现前台的样式与后台传送的数据分离,更加简化了代码
    $.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实现的无刷新分页代码,具体代码如下

    需要四个文件 
    一个实体类文件 CategoryInfoModel.cs 
    一个SqlHelper SQLHelper.cs 
    一个AJAX服务端处理程序 PagedService.ashx 
    一个客户端调用页面 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"];
    //取页数
    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);
    }//取每页数据
    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>();//定义实体集合
    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));//序列化实体集合为javascript对象
    }
    }
    WSXFY.htm 代码如下 
    <head>
    <title>无刷新分页</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(); //不要导向链接
    $.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>
  • 相关阅读:
    用户登录
    open >>>文件操作
    随机数
    内置函数
    函数练习
    函数的动态参数
    函数的指定参数
    函数的普通参数
    函数的初步认识
    copy
  • 原文地址:https://www.cnblogs.com/sjqq/p/6373310.html
Copyright © 2011-2022 走看看