columns().cache()

Since: DataTables 1.10

Get the DataTables cached data for the selected columns.

Description

DataTables caches data for searching and ordering in order for those operations to run as quickly as possible when they are required. Sometimes it can be useful to get the data that DataTables has cached for these operations, for example when creating a select list to provide a column based filter.

Cached data is not guaranteed to be available at any particular moment. If DataTables hasn't requested the data, it won't have been cached. This is particularly obvious when using the order option and a sort hasn't been performed on a column. Invalidation of data will also cause the cache to be removed.

It should be noted that this method is required as DataTables has the ability to use different data for its different operations (searching, ordering, display etc) - see columns.data and columns.render for further information. columns().data() provides access to the original data. If you aren't using orthogonal data for the different operations of DataTables, then this method is of limited used.

Please note that the order of the data in the returned array and which rows the data is obtained from (searched rows, visible rows etc) is controlled by the selector-modifier option of the column() selector used to get the selected column.

Note that this method is primarily aimed at plug-in developers who require access to the internal data that DataTables has stored.

Type

function columns().cache( type )

Description:

Obtain the data for the columns from the selector

Parameters:
Returns:

DataTables API instance with data for each cell in the selected columns in the result set. This is a 2D array with the top level array entries for each column matched by the columns() selector.

Example

Build a search for each column with a select-filter class.:

var table = $('#example').DataTable();

table.columns( '.select-filter' ).every( function () {
	var that = this;

	// Create the select list and search operation
	var select = $('<select />')
		.appendTo(
			this.footer()
		)
		.on( 'change', function () {
			that
				.search( $(this).val() )
				.draw();
		} );

	// Get the search data for the first column and add to the select list
	this
		.cache( 'search' )
		.sort()
		.unique()
		.each( function ( d ) {
			select.append( $('<option value="'+d+'">'+d+'</option>') );
		} );
} );

Related

The following options are directly related and may also be useful in your application development.