FixedColumns example DataTables API

This example shows how the cells in the fixed columns operate seamlessly with the DataTables API. Specifically in this case, a click event is used to show the data for the cell that was clicked on by using the cell() selector method and cell().data() to obtain the data.

Obviously this is a trivial use case, but it demonstrates clearly how the cells in the fixed columns operate with the DataTables API selector methods.

Note that the table().container() method is used to get the table's wrapper div to use as the base element for the delegated click event. This is appropriate in this case rather than simply using #example since the fixed column elements are not inside the original table element.

Clicked on cell data - new events added at the top

The Javascript shown below is used to initialise the table shown in this example:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        300,
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   true
    } );
 
    $(table.table().container()).on( 'click', 'td', function () {
        var cell = table.cell( this );
         
        $('#click-output').prepend(
            '<div>'+cell.data()+'</div>'
        );
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Initialisation and options

Integration with other DataTables extensions

Styling

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2016
DataTables is licensed under the MIT license.