jQuery Datatables Bindings

Assembly
WebExtras.dll
Namespace
WebExtras.JQDataTables
Dependancies
  • Appropriate third party libraries
  • jquery.datatables.bootstrap.js
  • webextras.bootstrap.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.....

Creating column definitions

Column definitions are created by instantiating the WebExtras.JQDataTables.AOColumn class

  AOColumn dtColumn = new AOColumn
  {
      sTitle = "First Column",    // Only the sTitle property is compulsory. All other properties are optional
      bSortable = true,
      sClass = "",                // any extra CSS class you would like to apply to this column
      sWidth = "10%",             // specified as a CSS width
      bVisible = true
  };  
  

Creating table settings

Table settings are created by instantiating the WebExtras.JQDataTables.DatatableSettings class
  
  // We need a collection of columns to be specified in the settings, so create an array from our column
  AOColumn[] dtColumns = new AOColumn[] { dtColumn };

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

Creating table records

Table records are created by instantiating the WebExtras.JQDataTables.DatatableRecords class

  // Let's create the actual data to go into the table
  string[][] dtData = new string[][]
  {
    new string[] { "first column row 1" },
    new string[] { "first column row 2" }
  };

  DatatableRecords dtRecords = new DatatableRecords
  {
    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
  };
  

Creating the table object

Let us now bring all the different components together

  // Let's create the datatable object with an HTML ID, our settings and records
  Datatable dtable = new Datatable("demo-table", dtSettings, dtRecords);
  

Now let's see the output

First Column Second Column
first column row 1second column row 1
first column row 2second column row 2
first column row 3second column row 3
first column row 4second column row 4