Nov 28, 2008 · This example shows how easy it is to add searching, ordering and paging to your HTML table by simply running DataTables on it. For further and more complex examples of using DataTables with DOM sourced data, please refer to the basic initialisation and advanced initialisation examples.

These examples will show you how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with pipelining and custom plug-in functions.

Nov 28, 2008 · This example shows the behaviour of SearchBuilder with columns of type html which is present in the age column.

One method in which DataTables can obtain this orthogonal data for its different actions is through custom HTML5 data attributes. DataTables will automatically detect four different attributes on the HTML elements: data-sort or data-order - for ordering data; data-filter or data-search - for search data

Editor provides a clean and responsive interface for end user manipulation of data, an expressive API for complete control and a well defined server communications protocol for data submission. This simple example shows a table with seven fields, each of which can be edited as plain text.

This examples shows an empty table element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created based on the columns.title configuration option.

DataTables is a Javascript HTML table enhancing library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Data within DataTables can be easily rendered to add graphics or colour to your tables, as demonstrated in the example on this page. These examples make use of columns.render to customise the cells in three ways: A flag is added to the Office column; a HTML5 progress bar is added to the Progress column

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables: This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table.

Editor will work with any data source that DataTables can use, with the only additional requirement that each row has a unique ID (allowing the server to identify which rows to update, delete, etc). This example shows Editor being applied to a plain HTML table (generated from the database, although it could come from absolutely anywhere).