Summary of features

DataTables is a professional quality plugin for jQuery, with extensive options and an expressive API. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. See the DataTables website for full details and documentation.

At a glance

  • Features pagination, instant search and multi-column ordering.
  • Supports almost any data source including DOM, JS, Ajax etc.
  • Integrates perfectly with the COLOURcode template styling.

DataTables can be styled with .table-brand1

Example of a DataTable with brand1 class applied .table.table-brand1

DataTables can be styled with .table-brand2

Example of a DataTable with brand2 class applied .table.table-brand2

DataTables can be styled with .table-blue

Example of a DataTable with blue class applied .table.table-blue

DataTables can be styled with .table-yellow

Example of a DataTable with yellow class applied .table.table-yellow

DataTables can be styled with .table-red

Example of a DataTable with red class applied .table.table-red

DataTables can be styled with .table-green

Example of a DataTable with green class applied .table.table-green

DataTables can be styled with .table-orange

Example of a DataTable with orange class applied .table.table-orange

DataTables can be styled with .table-purple

Example of a DataTable with purple class applied .table.table-purple

DataTables can be styled with .table-gold

Example of a DataTable with gold class applied .table.table-gold

DataTables can be styled with .table-bronze

Example of a DataTable with bronze class applied .table.table-bronze

DataTables can be styled with .table-silver

Example of a DataTable with silver class applied .table.table-silver

DataTables can be styled with .table-grey

Example of a DataTable with grey class applied .table.table-grey

Simple DataTable

Responsive DataTable (reduce window width to make responsive) .table.table-green

DataTable with reordering columns (drag column headers to reorder) .table.table-red

DataTable with reordering rows (drag first column to reorder) .table.table-gold

DataTable with fixed columns (decrease browser width to test) .table.table-purple

DataTable with deferred rendering scroller .table.table-yellow

DataTable with scrolling .table.table-silver

DataTable with Buttons .table.table-blue

DataTable with ColVis (click Columns to show/hide columns) .table.table-grey