<?xml version="1.0" encoding="UTF-8" ?>
<dt-example table-type="html-index" order="9">

<css lib="datatables" />
<js lib="jquery" />
<js lib="datatables" />

<title>Index column</title>
<js><![CDATA[

$(document).ready(function() {
	var t = $('#example').DataTable( {
		"columnDefs": [ {
			"searchable": false,
			"orderable": false,
			"targets": 0
		} ],
		"order": [[ 1, 'asc' ]]
	} );

	t.on( 'order.dt search.dt', function () {
		t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
			cell.innerHTML = i+1;
		} );
	} ).draw();
} );

]]></js>

<info><![CDATA[

Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. This column should not be sortable, and will change dynamically as the ordering and searching 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 ordering or searching occurs. This is done by listening for the `dt-event order` and `dt-event search` events emitted by the table. When these events are detected the `dt-api column().nodes()` method is used to get the TD/TH nodes for the target column and the `each()` helper function used to iterate over each, which have their contents updated as needed. Note that the `filter` and `order` options are using in the `dt-api column()` method to get the nodes in the current order and with the currently applied filter.

]]></info>

</dt-example>
