DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom elements. In this example a DIV with a class of 'toolbar' is created using sDom, and then HTML is inserted into the created DIV once the table has been initialised. You could put whatever HTML you want into the toolbar and add event handlers etc.
For more complex DOM manipulation around the table, you might want to consider making use of DataTables feature plug-in API, which is used for TableTools and other DataTables plug-ins.
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
|---|---|---|---|---|
| Rendering engine | Browser | Platform(s) | Engine version | CSS grade |
| Gecko | Firefox 1.0 | Win 98+ / OSX.2+ | 1.7 | A |
| Gecko | Firefox 1.5 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Firefox 2.0 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Firefox 3.0 | Win 2k+ / OSX.3+ | 1.9 | A |
| Gecko | Camino 1.0 | OSX.2+ | 1.8 | A |
| Gecko | Camino 1.5 | OSX.3+ | 1.8 | A |
| Gecko | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | 1.7 | A |
| Gecko | Netscape Browser 8 | Win 98SE+ | 1.7 | A |
| Gecko | Netscape Navigator 9 | Win 98+ / OSX.2+ | 1.8 | A |
| Gecko | Mozilla 1.0 | Win 95+ / OSX.1+ | 1 | A |
1 2 3 4 5 6 | $(document).ready(function() { $('#example').dataTable( { "sDom": '<"toolbar">frtip' } ); $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');} ); |