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.....

Status column is a column which contains the CSS classes to be applied to the associated row. This feature is very handy to notify the user of any status per row in the table. By default the four classes: error, warning, info and success are supported which are analogous to the jQuery UI and Twitter Bootstrap frameworks. However, since it is all in the CSS, you are free to modify and use any classes of you choosing.

Modified Datatable constructor setup

We enable the enableStatusColumn flag on the Datatable constructor
   
  Datatable dTable = new Datatable("status-table", dtSettings, dtRecords, enableStatusColumn: true);
  

Making the data to be displayed

Now when making the data to be displayed you can add an extra column containing any CSS classes that you would like to be used to add styling to the table rows.
   
  string[][] dtData = new string[][]
  {
    new string[] { "first column row 1", "second column row 1", "error" },    
    new string[] { "first column row 2", "second column row 2", "warning" },
    new string[] { "first column row 3", "second column row 3", "info" },
    new string[] { "first column row 4", "second column row 4", "success" }
  };
  

Modified Datatable constructor setup

We enable the enableStatusColumn flag on the Datatable constructor
   
  Datatable dTable = new Datatable("status-table", dtSettings, dtRecords, enableStatusColumn: true);
  

And our status column enabled output is

First Column Second Column
first column row 1second column row 1error danger
first column row 2second column row 2warning
first column row 3second column row 3info
first column row 4second column row 4success