Preamble

A fairly common requirement for highly interactive tables which are displayed on the web is to have a column which with a 'counter' for the row number. This column should not be sortable, and change dynamically as the sorting and filtering applied to the table is altered by the end user.

This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when sorting or filtering occurs. Also the first column is marked as un-sortable and initial sorting is applied only on the second column.

Live example

Initialisation code

$(document).ready(function() {
	$('#example').dataTable( {
		"fnDrawCallback": function ( oSettings ) {
			/* Need to redo the counters if filtered or sorted */
			if ( oSettings.bSorted || oSettings.bFiltered )
			{
				for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
				{
					$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
				}
			}
		},
		"aoColumnDefs": [
			{ "bSortable": false, "aTargets": [ 0 ] }
		],
		"aaSorting": [[ 1, 'asc' ]]
	} );
} );

Other examples