CODEWITHSUNDEEP
jqueryjquery-pluginsdatatables
hd.
hd.

Reputation: 18346

make columns unsortable in dataTables.js jQuery plugin

I am using the dataTables.js jQuery plugin.

The first column of my table is a row counter, so I don't want it be sortable by the user. The last column contains some action link that the user can perform on a row. How can I make these two columns unsortable?

Note: I am using pipeline (server-side process) mode of datatables.

Upvotes: 18

Views: 13559

Answers (4)

Jeromy French
Jeromy French

Reputation: 12121

DataTables 1.10+ also supports HTML5 data- style attributes, including data-sortable="false", which makes the column ineligible for sorting:

<table>
    <thead>
        <tr>
            <th data-sortable="false">Row</th>
            <th>Name</th>
            <th>Join Date</th>
            <th>Organization</th>
            <th data-sortable="false">Options</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            [etc]
        </tr>
    </tbody>
</table>

See this demo in jsFiddle

Upvotes: 8

Dmytro Zarezenko
Dmytro Zarezenko

Reputation: 10686

You can define a callback function for support unchangeable numbers order in separate column:

$('#someId').dataTable({
        // ...
        "aoColumns": [
            // ...
            {"bSortable": false}, // set unsortable this column
            // ...
        ],
        fnDrawCallback: function(oSettings) {
            $(this).find('tbody tr').each(function(index) {
                $(this).find('td').eq(1).text(index + 1); // .eq([index of column])
            });
        }
    });

Upvotes: 0

sieppl
sieppl

Reputation: 714

This is done by setting bSortable to false:

/* Using aoColumnDefs */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumnDefs": [ 
            { "bSortable": false, "aTargets": [ 0 ] }
        ] } );
} );

/* Using aoColumns */
$(document).ready(function() {
    $('#example').dataTable( {
        "aoColumns": [ 
            { "bSortable": false },
            null,
            null,
            null,
            null
        ] } );
} );

Upvotes: 12

Eugene
Eugene

Reputation: 11280

aaSortingFixed

This parameter is basically identical to the aaSorting parameter, but cannot be overridden by user interaction with the table. What this means is that you could have a column (visible or hidden) which the sorting will always be forced on first - any sorting after that (from the user) will then be performed as required. This can be useful for grouping rows together.

Example of usage:

$(document).ready( function() {
    $('#example').dataTable( {
         "aaSortingFixed": [[0,'asc'],[5,'asc']]
    } );
} );

0 is number of your 'unsortable' row (from left). (So in that example the first and the sixths column are fixed)

Official Documentation

Upvotes: 3

Related Questions