jQuery DataTables server-side processing using ASP.NET WebForms
I wrote a simple example that should illustrate the idea.
Start by writing a generic handler for handling data on the server side (Data.ashx but this could be a web page, web service, anything server side script capable of returning JSON formated data):
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 }; } }}And then a 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" class="display" id="example"> <thead> <tr> <th>ID</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td colspan="5" class="dataTables_empty">Loading data from server</td> </tr> </tbody> </table> </form></body></html>The example is oversimplified but I hope it will illustrate the basics on how to get stared.
The example pages you listed actually sort, paginate, filter on initialization. Basically, you pass those data via query string.
Something like:
sAjaxSource": "../examples_support/server_processing.ashx?SortBy=FirstName&FilterBy=StackOverFlow"Having said that, if you want to override some behavior or want to extend dataTable's functionaly, you have a few options: Extending dataTable functionality Customizing Scrolling
You can follow the above examples and customize them for Filtering, Sorting, and Pagination
I'm asp.Net developer... Please take in mind that .net developers are used to build web pages using .net controls, not javascript controls.
The difference is: an asp.net control is a server-side control, you manage it without writing javascript your self, but programming in C#/VB.net. The asp.net control automatically generates the client-side javascript control when the website runs.
It approach is more "modern" and really powerful.
So if you are a .net developer I suggest you to use this approach. If you are a javascript developer and you are building only the client-side interface of your application, probably you need a webService that provides the server-side data in XML format that you can call and read over HTTP. But, to "search", provide "pagination" and "sorting" via AJAX you need to develop server-side...