脚本语言 订阅所有【脚本语言】的日志

jQuery插件：DataTables分页取数据示例

编辑:dnawo 日期:2012-10-22

字体大小: 小 中 大
DataTables分页取数据示例

Default.aspx：
复制内容到剪贴板程序代码 程序代码
<%@ Page Language="C#" %>

<!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 runat="server">
    <title>DataTables分页取数据示例 - Mzwu.COM</title>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#example").dataTable({
                "bLengthChange": false,
                "bFilter": false,
                "bSort": false,
                "bAutoWidth": false,
                "bStateSave": true,
                "iDisplayLength": 10,
                //"sPaginationType": "full_numbers",            
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "data.ashx",
                "sServerMethod": "POST",
                "fnServerParams": function (aoData) {
                    aoData.push({"name": "name1", "value": "value1"});
                    aoData.push({"name": "name2", "value": "value2"});
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table id="example" width="100%" border="0" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <td>Id</td>
          <td>Name</td>
        </tr>
      </thead>
    </table>
    </form>
</body>
</html>

data.ashx：
复制内容到剪贴板程序代码 程序代码
<%@ WebHandler Language="C#" Class="data" %>

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

public class data : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        //data
        List<List<string>> data = new List<List<string>>();
        for (int i = 0; i < 100; i++)
        {
            data.Add(new List<string> { i.ToString(), "user" + i.ToString() });
        }

        //Request.Form
        //sEcho=1&iColumns=2&sColumns=&iDisplayStart=10&iDisplayLength=10&mDataProp_0=0&mDataProp_1=1&name1=value1&name2=value2
        string sEcho = context.Request.Form["sEcho"];
        int iDisplayStart, iDisplayLength;
        int.TryParse(context.Request.Form["iDisplayStart"], out iDisplayStart);
        int.TryParse(context.Request.Form["iDisplayLength"], out iDisplayLength);

        //Server Data
        ServerData serverdata = new ServerData();
        serverdata.sEcho = sEcho;
        serverdata.iTotalRecords = data.Count;
        serverdata.iTotalDisplayRecords = data.Count;
        serverdata.aaData = data.Skip(iDisplayStart).Take(iDisplayLength).ToList();
        
        //output json
        JavascriptSerializer serializer = new JavascriptSerializer();
        context.Response.Write(serializer.Serialize(serverdata));
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

public class ServerData
{
    public string sEcho { get; set; }
    public int iTotalRecords { get; set; }
    public int iTotalDisplayRecords { get; set; }
    public List<List<string>> aaData { get; set; }
}

参考资料

[1].Server-side processing：http://www.datatables.net/usage/server-side

上一篇: jQuery插件：DataTables简单示例
下一篇: jQuery插件：Validation简单示例
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
最新日志:
评论: 0 | 引用: 0 | 查看次数: 9787
发表评论
请登录后再发表评论！