Each column has an optional rendering control called mRender which can be used to process the content of each cell before the data is used. mRender has a wide array of options available to it for rendering different types of data (sorting, filtering, display etc), but it can be used very simply to manipulate the content of a cell, as shown here.
This example shows the rendering engine version combined with the rendering engine name in the first column, hiding the version column. This technique can be useful for adding links, assigning colours based on content rules and any other form of text manipulation you require.
| Rendering engine | Browser | Platform(s) | CSS grade |
|---|---|---|---|
| Rendering engine | Browser | Platform(s) | CSS grade |
| Gecko 1 | Mozilla 1.0 | Win 95+ / OSX.1+ | A |
| Gecko 1.1 | Mozilla 1.1 | Win 95+ / OSX.1+ | A |
| Gecko 1.2 | Mozilla 1.2 | Win 95+ / OSX.1+ | A |
| Gecko 1.3 | Mozilla 1.3 | Win 95+ / OSX.1+ | A |
| Gecko 1.4 | Mozilla 1.4 | Win 95+ / OSX.1+ | A |
| Gecko 1.5 | Mozilla 1.5 | Win 95+ / OSX.1+ | A |
| Gecko 1.6 | Mozilla 1.6 | Win 95+ / OSX.1+ | A |
| Gecko 1.7 | Firefox 1.0 | Win 98+ / OSX.2+ | A |
| Gecko 1.7 | Netscape 7.2 | Win 95+ / Mac OS 8.6-9.2 | A |
| Gecko 1.7 | Netscape Browser 8 | Win 98SE+ | A |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(document).ready(function() { $('#example').dataTable( { "aoColumnDefs": [ { // `data` refers to the data for the cell (defined by `mData`, which // defaults to the column being worked with, in this case is the first // Using `row[0]` is equivalent. "mRender": function ( data, type, row ) { return data +' '+ row[3]; }, "aTargets": [ 0 ] }, { "bVisible": false, "aTargets": [ 3 ] }, { "sClass": "center", "aTargets": [ 4 ] } ] } );} ); |