Stock Result

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 and drawCallback to customise the cells in three ways:

1. the colour of the cell is determine by the relative price of the stock.

2. a 'sparkline' class is added to the numeric array in the 'last' column.

3. the jQuery Sparklines plugin is called to turn that array into a line graph.

Row Create Callback

For each row that is generated for display, the createdRow function is called once and once only. It is passed the create row node which can then be modified.

the 'salary' column Primary and bold by adding a CSS class to the container cell if the salary is greater than $150,000.

the 'salary' column danger and bold by adding a CSS class to the container cell if the salary is less than $40,000.

Footer callback

With the use of the header and footer callback manipulation functions provided by DataTables headerCallback option and footerCallback option, it is possible to perform some powerful and useful data manipulation functions, such as summarizing data in the table.

Row Grouping

In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator is added by the drawCallback Option function , which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found.A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.