使用ASP.NET WebForms的jQuery DataTables服务器端处理

使用ASP.NET WebForms的jQuery DataTables服务器端处理,第1张

使用ASP.NET WebForms的jQuery DataTables服务器端处理

我写了一个简单的例子来说明这个想法。

首先,编写用于在服务器端处理数据的通用处理程序(

Data.ashx
但这可以是网页,Web服务,任何能够返回JSON格式数据的服务器端脚本):

    public class data: IHttpHandler    {        public void ProcessRequest(HttpContext context)        { // Those parameters are sent by the plugin var iDisplayLength = int.Parse(context.Request["iDisplayLength"]); var iDisplayStart = int.Parse(context.Request["iDisplayStart"]); var iSortCol = int.Parse(context.Request["iSortCol_0"]); var iSortDir = context.Request["sSortDir_0"]; // Fetch the data from a repository (in my case in-memory) var persons = Person.GetPersons(); // Define an order function based on the iSortCol parameter Func<Person, object> order = p =>  {     if (iSortCol == 0)      {          return p.Id;      }     return p.Name; }; // Define the order direction based on the iSortDir parameter if ("desc" == iSortDir) {     persons = persons.OrderByDescending(order); } else {     persons = persons.OrderBy(order); } // prepare an anonymous object for JSON serialization var result = new {     iTotalRecords = persons.Count(),     iTotalDisplayRecords = persons.Count(),     aaData = persons         .Select(p => new[] { p.Id.ToString(), p.Name })         .Skip(iDisplayStart)         .Take(iDisplayLength) }; var serializer = new JavascriptSerializer(); var json = serializer.Serialize(result); context.Response.ContentType = "application/json"; context.Response.Write(json);        }        public bool IsReusable        { get {     return false; }        }    }    public class Person    {        public int Id { get; set; }        public string Name { get; set; }        public static IEnumerable<Person> GetPersons()        { for (int i = 0; i < 57; i++) {     yield return new Person     {         Id = i,         Name = "name " + i     }; }        }    }

然后是一个WebForm:

    <%@ Page title="Home Page" Language="C#" %>    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">    <head id="Head1" runat="server">        <title></title>        <link rel="stylesheet" type="text/css" href="/styles/demo_table.css" />         <script type="text/javascript" src="/scripts/jquery-1.4.1.js"></script>        <script type="text/javascript" src="/scripts/jquery.dataTables.js"></script>        <script type="text/javascript"> $(function () {     $('#example').dataTable({         'bProcessing': true,         'bServerSide': true,         'sAjaxSource': '/data.ashx'     }); });        </script>    </head>    <body>        <form id="Form1" runat="server"> <table cellpadding="0" cellspacing="0" border="0"  id="example">      <thead>      <tr>          <th>ID</th>          <th>Name</th>      </tr>      </thead>      <tbody>      <tr>          <td colspan="5" >Loading data from server</td>      </tr>      </tbody>  </table>        </form>    </body>    </html>

示例过于简化,但我希望它能说明如何凝视的基础知识。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5010440.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-15
下一篇 2022-11-14

发表评论

登录后才能评论

评论列表(0条)

保存