Creating table settings

Table settings are created by instantiating the WebExtras.JQDataTables.DatatableSettings class

  
  DatatableSettings dtSettings = new DatatableSettings 
  (
    5,                                      // specify the number of records per page
    dtColumns,
    new AASort(0, SortType.Ascending),      // specify one initial sort, multiple initial sorts, or leave null for no sort
    "~/getajaxdata",                         // specify an AJAX source to retrieve data from
    "ajax records",                         // specify a table footer suffix
    "150px"                                 // specify a maximum table height, once reached you will get scroll bars
  );
  

Creating the AJAX callback handler action

In order to populate data with an AJAX callback, you will obviously need a call back action/page/request handler which returns JSON formatted data. This example uses a .NET MVC controller action, however you are not limited to that. All you need is for the server to accept some parameters from a client HTTP GET request, process the data accordingly and return the JSON formatted table data.

  public JsonResult GetAjaxData(DatatableFilters filters)
  {
    // Let's create the actual data to go into the table
    // You can retrieve data from your repository here
    string[][] dtData = new string[][]
    {
      new string[] { "first column ajax row 1", "second column ajax row 1" },    
      new string[] { "first column ajax row 2", "second column ajax row 2" }
    };

    DatatableRecords dtRecords = new DatatableRecords
    {
      sEcho = filters.sEcho,
      iTotalRecords = dtData.Length,                      // Total records in table
      iTotalDisplayRecords = dtData.Length,               // Total records to be displayed in the table
      aaData = dtData                                     // The data to be displayed
    };

    return Json(dtRecords, JsonRequestBehavior.AllowGet);
  }
  

DatatableFilters class is just an entity class which makes use of the .NET MVC auto binding feature to look at the request parameters and try to populate the appropriate attributes of the class. If you are not using .NET MVC, your request handler definition would look something like this:

  public string GetAjaxData(string sEcho, 
    string sSearch, 
    int iDisplayLength, 
    int iDisplayStart, 
    int iColumns, 
    int iSortingCols, 
    int iSortCol_0, 
    string sSortDir_0, 
    string sColumns)
  

And the output is