DataTables

• Usage
• Examples
• Styling
• API
• Development
• Editor
• Extras
• Plug-ins
• Blog
• FAQs
• Forums

Purchase

Download

Support

Preamble

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.

Live example

Initialisation code

$(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 ] }
		]
	} );
} );

Other examples