ColReorder example ColVis integration

ColReorder interfaces with the ColVis extension for DataTables by updating the order of the list of columns whenever a reorder is done. This is shown in the example below, where one column has been initially hidden to add extra emphasis to ColVis.

NameOfficeAgeStart dateSalary
NameOfficeAgeStart dateSalary
Airi Satou Tokyo 33 2008/11/28 $162,700
Angelica Ramos London 47 2009/10/09 $1,200,000
Ashton Cox San Francisco 66 2009/01/12 $86,000
Bradley Greer London 41 2012/10/13 $132,000
Brenden Wagner San Francisco 28 2011/06/07 $206,850
Brielle Williamson New York 61 2012/12/02 $372,000
Bruno Nash London 38 2011/05/03 $163,500
Caesar Vance New York 21 2011/12/12 $106,450
Cara Stevens New York 46 2011/12/06 $145,600
Cedric Kelly Edinburgh 22 2012/03/29 $433,060
Showing 1 to 10 of 57 entries

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

Javascript
1
2
3
4
5
6
7
8
$(document).ready(function() {
    var table = $('#example').DataTable( {
        dom: 'RC<"clear">lfrtip',
        columnDefs: [
            { visible: false, targets: 1 }
        ]
    } );
} );

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

Other examples

Examples

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

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