我写了一个简单的例子来说明这个想法。
首先,编写用于在服务器端处理数据的通用处理程序(
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>
该示例过于简化,但我希望它能说明如何凝视的基础知识。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)