RowReorder example Restricted column ordering

This example shows the same information as the simple example, but in this case restricts the column ordering that can be applied to the table to just the sequence number column. Generally this will be the configuration that RowReorder will be used in, as ordering by other columns can make the reordering potentially quite confusing for the end user.

The restriction to the first column only for ordering is applied through the columnDefs option and columns.orderable. The columnDefs are applied in descending priority order, so the first entry overrides the second for the first column.

Seq.NamePositionOfficeStart dateSalary
Seq.NamePositionOfficeStart dateSalary
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
9 Hermione Butler Regional Director London 2011/03/21 $356,250
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
Showing 1 to 10 of 57 entries

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

1
2
3
4
5
6
7
8
9
$(document).ready(function() {
    var table = $('#example').DataTable( {
        rowReorder: true,
        columnDefs: [
            { orderable: true, className: 'reorder', targets: 0 },
            { orderable: false, targets: '_all' }
        ]
    } );
} );

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