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
    "~/getpageddata",                       // specify an AJAX source to retrieve data from
    "paged records",                         // specify a table footer suffix
    "150px"                                 // specify a maximum table height, once reached you will get scroll bars
  );
  

Creating a data handler

We make use of the C# LinqToSQL feature in order to simulate the paging behavior. This is how your paging method will normally look:

  
  public DatatableRecords GetPagedRecords(DatatableFilters filters)
  {
    // Let's create the actual data to go into the table by adding 15 records
    List<string[]> dtData = new List<string[]>();

    // You can retrieve data from your repository here
    for (int i = 0; i < 15; i++)
    {
      dtData.Add(new string[] { 
        string.Format("first column paged row {0}", i + 1), 
        string.Format("second column paged row {0}", i + 1) 
      });
    }

    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.Skip(filters.iDisplayStart).Take(iDisplayLength)      // The paged data to be displayed
    };

    return dtRecords;
  }
  

The reason we use the DatatableFilters as a parameter will soon be apparent

Make the first page of the table

We need to create the first page of the table in order to have the paging behavior kick in. This should be done when you display the table the first time.

  
  DatatableRecords dtRecords = GetPagedRecords(new DatatableFilters { iDisplayStart = 0, iDisplayLength = 5 });
  Datatable dTable = new Datatable("paged-table", dtSettings, dtRecords);
  

A slightly modified AJAX callback handler

We will now make use of the method that we have already created before to do our grunt work and get the data. The fact that we have used DatatableFilters as one of the parameters means that we can simply forward the filtering parameters we got from the HTTP GET request from the client side.

  public JsonResult GetPagedData(DatatableFilters filters)
  {
    DatatableRecords dtRecords = GetPagedRecords(filters);

    return Json(dtRecords, JsonRequestBehavior.AllowGet);
  }
  

And our paging enabled output is

Some more thing you should know

WebExtras in conjunction with the core jQuery DataTables library provides 5 paging mechanism, 2 of which come from the native library and 3 more from plugins.

Paging mechanism is controlled by the SetupPaging() method on the WebExtras.JQDataTables.DatatableSettings class.

By default the Bootstrap paging mechanism will be selected by the library. Paging can be disabled by setting the pagination type as None.