I have datatable with id, firstName, lastName, phone, updated fields.

Problem: I add to datatable only four fields (id, firstName, lastName and phone). Updated field is hidden.

Question: how to sort datatable by updated field?

My code:

   $('#table').dataTable({
        sDom: '<"top"fi>tS',
        sScrollY: ($(window).height() - 250) + "px",
        bPaginate: false,
        bDeferRender: true,
        bAutoWidth: false,
        oLanguage: {
            sInfo: "Total: _TOTAL_ entities",
            sEmptyTable: "No pending entities"
        },
        "aoColumnDefs": [
            { "iDataSort": 4, "aTargets": [ 0 ] }
        ],
        "aoColumns": [
            { "sWidth": "10%" },
            { "sWidth": "40%" },
            { "sWidth": "30%" },
            { "sWidth": "20%" },
            { "sTitle": "updated ", "bVisible":false }
        ],
        fnCreatedRow: function( nRow, aData, iDataIndex ) {
            $(nRow).attr('id', aData[0]);
        }
    });

table.fnAddData([id, firstName, lastName, phone, updated]);

I have datatable with id, firstName, lastName, phone, updated fields.

Problem: I add to datatable only four fields (id, firstName, lastName and phone). Updated field is hidden.

Question: how to sort datatable by updated field?

My code:

   $('#table').dataTable({
        sDom: '<"top"fi>tS',
        sScrollY: ($(window).height() - 250) + "px",
        bPaginate: false,
        bDeferRender: true,
        bAutoWidth: false,
        oLanguage: {
            sInfo: "Total: _TOTAL_ entities",
            sEmptyTable: "No pending entities"
        },
        "aoColumnDefs": [
            { "iDataSort": 4, "aTargets": [ 0 ] }
        ],
        "aoColumns": [
            { "sWidth": "10%" },
            { "sWidth": "40%" },
            { "sWidth": "30%" },
            { "sWidth": "20%" },
            { "sTitle": "updated ", "bVisible":false }
        ],
        fnCreatedRow: function( nRow, aData, iDataIndex ) {
            $(nRow).attr('id', aData[0]);
        }
    });

table.fnAddData([id, firstName, lastName, phone, updated]);

• javascript
• jquery
• datatables

• Do you want to sort it on table initilisation? – dcodesmith Commented Jan 29, 2014 at 12:27
• @dcodesmith yes. But it be good if I can sort it at any moment. – VB_ Commented Jan 29, 2014 at 12:32
• Ok, what position is the update column in your table, I know it's hidden but it should have index – dcodesmith Commented Jan 29, 2014 at 12:33
• @dcodesmith by hidden I mean that I don't add it at all. If I must add updated column, than show me how please – VB_ Commented Jan 29, 2014 at 12:38
• @dcodesmith I mean that at the moment table does not contain any updated field. I don't know how to add hidden field. – VB_ Commented Jan 29, 2014 at 12:40

3 Answers 3

From the documentation:.

iDataSort The column index (starting from 0!) that you wish a sort to be performed upon when this column is selected for sorting. This can be used for sorting on hidden columns for example.

Default: -1 Use automatically calculated column index

Type: int

// Using aoColumnDefs
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
      { "iDataSort": 1, "aTargets": [ 0 ] }
    ]
  } );
} );
 
// Using aoColumns
$(document).ready( function() {
  $('#example').dataTable( {
    "aoColumns": [
      { "iDataSort": 1 },
      null,
      null,
      null,
      null
    ]
  } );
} );

you can simply use { "iDataSort": 4 } here (4 is the index of your hidden field)

var data = [
["1","john","mathew","1234",[]],
["2","Mary","rose","1234","1"],
];

To add hidden fields and to add data to table

aaData: data,
aoColumns :[
        { "sTitle": "id","bSortable": false },
        { "sTitle": "firstName","bSortable": false, },
        { "sTitle": "lastName", "bSortable": false,},
        {"sTitle": "phone","bSortable": false},
        {"sTitle": "updated ", "bVisible":false },
        ]

To add hidden fields use "bVisible":false

I was facing a problem by sorting the hidden column in runtime, don't know the approach is valid or not. I used the following lines to hide the column via CSS

td:nth-of-type(2) {
display: none;
}

Where 2 is your column, assign a class to your <th class="mycolum1"> and use jquery to sort it like

$("#button").click(function(){
$(".mycolumn").click();
})

Pardon me if the approach is not valid but in my case it is 100% acceptable.