Overview

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. DataTables library is compatible with IE6 and newer. The extensions require IE8 or newer. All other evergreen browsers (Chrome, Firefox, Safari, Opera) are fully supported.

Usage

											
												<!-- Load jQuery -->
												<script src="assets/js/jquery/jquery.min.js"></script>

												<!-- Load plugin -->
												<script src="assets/js/vendor/tables/datatables/datatables.min.js"></script>
											
										

											
												<!-- Add table -->
												<table class="table datatable-basic">
													<thead>
														<tr>
															<th>...</th>
															...
														</tr>
													</thead>
													<tbody>
														<tr>
															<td>...</td>
														</tr>
														...
													</tbody>
												</table>
											
										

											
												// Basic initialization
												$('.datatable-basic').DataTable({
													autoWidth: false,
													dom: '<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>',
													language: {
														search: '<span class="me-3">Filter:</span> <div class="form-control-feedback form-control-feedback-end flex-fill">_INPUT_<div class="form-control-feedback-icon"><i class="ph-magnifying-glass opacity-50"></i></div></div>',
														searchPlaceholder: 'Type to filter...',
														lengthMenu: '<span class="me-3">Show:</span> _MENU_',
														paginate: { 'first': 'First', 'last': 'Last', 'next': document.dir == "rtl" ? '←' : '→', 'previous': document.dir == "rtl" ? '→' : '←' }
													}
												});
											
										

Datatables extensions

The features that DataTables provides can be greatly enhanced by the use of the plug-ins available on this page, which give many new user interaction and configuration options. Extensions added to the Limitless configuration:

• AutoFill extension

  AutoFill adds an Excel like data fill option to DataTables, allowing click and drag over cells, filling in information and incrementing numbers as needed

• Buttons

  The Buttons extension for DataTables provides a common set of options, API methods and styling to display buttons on a page that will interact with a DataTable. Modules are also provided for data export, printing and column visibility control

• ColReorder

  ColReorder adds the ability for the end user to be able to reorder columns in a DataTable through a click and drag operation. This can be useful when presenting data in a table, letting the user move columns that they wish to compare next to each other for easier comparison.

• FixedColumns

  FixedColumns "freezes" in place the left most columns in a scrolling DataTable, to provide a guide to the end user (for example an index column)

• KeyTable

  KeyTable provides Excel like cell navigation on any table. Events (focus, blur, action etc) can be assigned to individual cells, columns, rows or all cells

• Responsive

  Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens

• RowReorder

  RowReorder adds the ability for rows in a DataTable to be reordered through user interaction with the table (click and drag / touch and drag). Integration with Editor's multi-row editing feature is also available to update rows immediately

• Scroller

  A virtual renderer for DataTables, allowing the table to look like it scrolls for the full data set, but actually only drawing the rows required for the current display, for fast operation

• Select

  Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Item selection can be particularly useful in interactive tables where users can perform some action on the table such as editing

Datatables documentation

Full Datatables documentation can be found online on Official library website. It's quite big, with a lot of options, events and powerful API. Also check out Full reference and a complete manual. Below you can find additional links related to Datatables library.

Plugin info