jQuery Datatables Bindings

Assembly
WebExtras.dll
Namespace
WebExtras.JQDataTables
Dependancies
  • Appropriate third party libraries
  • jquery.dataTables.bootstrap3.js
  • jquery.dataTables.bootstrap3.css
  • webextras.bootstrap3.css
Steps involved in creating a Datatable
  • Creating the column definitions
  • Creating the table settings
  • Creating the table records
  • Creating the table object
  • And finally the output.....

Paging support can be added by slightly modifying our AJAX callback action/request handler

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

First Column Second Column

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.

Pagination type Description
None Disables paging
Full Numbers Provides the forward, back, first and last button along with individual page buttons
Two buttons Provides a more compact version of full numbers with only 2 buttons - previous and next
Bootstrap This comes from a plug-in and provides the mark-up needed for using pagination styling of Bootstrap 2.x with DataTables. Note that this plug-in uses the fnPagingInfo API plug-in method to obtain paging information.
Bootstrap3 This comes from a plug-in and provides the mark-up needed for using pagination styling of Bootstrap 3 with DataTables.
Four Button The built-in pagination functions provide either two buttons (forward / back) or lots of buttons (forward, back, first, last and individual pages). This plug-in meets the two in the middle providing navigation controls for forward, back, first and last.
Scrolling This modification of DataTables' standard two button pagination controls adds a little animation effect to the paging action by redrawing the table multiple times for each event, each draw progressing by one row until the required point in the table is reached.
Gumby This is the default Full Numbers paging scheme with Gumby styling and layout applied