jQuery DataTables server-side processing using ASP.NET WebForms
Solution 1:
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.
Solution 2:
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
Solution 3:
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...
Solution 4:
Maybe this could help? http://www.codeproject.com/KB/aspnet/ASPNET_DataTable_to_JSON.aspx