DataTables with hidden columns

Preamble

There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user. This hidden data can still be filtered upon allowing the user access to that data (for example 'tag' information for a row entry), or this can be disabled. In the table below both the platform and engine version columns have been hidden, the former is searchable, the latter is not.

Live example

Show entries
Search:
Rendering engine Browser CSS grade
Rendering engine Browser CSS grade
Gecko Firefox 1.0 A
Gecko Firefox 1.5 A
Gecko Firefox 2.0 A
Gecko Firefox 3.0 A
Gecko Camino 1.0 A
Gecko Camino 1.5 A
Gecko Netscape 7.2 A
Gecko Netscape Browser 8 A
Gecko Netscape Navigator 9 A
Gecko Mozilla 1.0 A
Showing 1 to 10 of 57 entries

Initialisation code

$(document).ready(function() {
				$('#example').dataTable( {
					"aoColumnDefs": [ 
						{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
						{ "bVisible": false, "aTargets": [ 3 ] }
					] } );
			} );

Other examples

Basic initialisation

Advanced initialisation

Data sources

Server-side processing

API

Plug-ins

Please refer to the DataTables documentation for full information about its API properties and methods.