jQuery Datatables - Bootstrap 3

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 1	second column row 1	error danger
first column row 2	second column row 2	warning
first column row 3	second column row 3	info
first column row 4	second column row 4	success