Cannot specify a default column sort of datatables javascript

Question

I need to sort by a specific column on page load, in this case, have it show initial results with a descending sort on "RecordDate".

The problem is, I believe the server side is blocking any sort specification, and any modification I made below will not load results (asSorting [[number of column, and tried name, desc]] etc).

Is there a special function I can write to force this column sort? Curious if this can be handled here before modifying a stored procedure or another cs file.

function GetRecords( DTO ) {
var grpid = ApplyGroupingOnTable();
console.log( grpid );
oTable = $( "#SearchTable" ).dataTable( {
    "oLanguage": {
        "sZeroRecords": "No records to display"//,
        //"sSearch": "Search on UserName"
    },
    "aLengthMenu": [[10, 25, 50, 100, 150, 250, 500], [10, 25, 50, 100, 150, 250, 500]],
    "iDisplayLength": 10,
    "sScrollX": "1300px",
    "bSortClasses": false,
    "bStateSave": false,
    "bFilter": false,
    "bLengthChange": true,
    "bPaginate": true,
    "bAutoWidth": false,
    "bProcessing": false,
    "bServerSide": true,
    "bDestroy": true,
    "sAjaxSource": "/Data/SearchRecords",
    "aoColumns": [
        { "mData": "SelectID", "sClass": "alternatingCenterAlign", fnRender: CreateSelectCaseViewerButton, "bSortable": false, "bSearchable": false, "sWidth": "18px" },
        { "mData": "ViewID", "sClass": "alternatingCenterAlign", fnRender: CreateCaseViewerButton, "bSortable": false, "bSearchable": false, "sWidth": "18px" },
        { "mData": "TagID", "sClass": "alternatingCenterAlign", fnRender: CreateTagCaseButton, "bSortable": false, "bSearchable": false, "sWidth": "18px" },
        { "mData": "ID", "sClass": "alternating", "sType": "string", "bSortable": true, "bSearchable": false, "sWidth": "50px" },
        { "mData": "ClientName", "sClass": "alternating", "sType": "string", "bSortable": true, "sWidth": "120px" },
        { "mData": "RecordDate", "sClass": "alternating", "sType": "string", "bSortable": true, "bSearchable": false, "sWidth": "70px" },

    "bJQueryUI": false,
    "sPaginationType": "full_numbers",
    "bDeferRender": true,
    "bRetrieve": false,
    "fnServerParams": function ( aoData ) {
        aoData.push( { "name": "iParticipant", "value": $( "#participant" ).val() } );
        aoData.push( { "name": "iSearch", "value": JSON.stringify( DTO ) } );
        aoData.push( { "name": "iId", "value": cliid } );
        aoData.push( { "name": "iOrder", "value": grpid } );
    },
    "fnDrawCallback": function ( oSettings ) {
        if ( grpid ) FinalGrouping( oSettings, grpid );
        $( ".overflow" ).each( function () { $( this ).attr( 'title', $( this ).text() ); } );
        $( '#tablediv select' ).chosen();
    },
    "fnServerData": function ( sSource, aoData, fnCallback ) {
        $( '.grid-loading' ).show();
        $.ajax( {
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            type: "GET",
            url: sSource,
            data: aoData,
            cache: false,
            success: function ( msg ) {
                if ( msg.Exception != undefined ) {
                    alert( msg.Exception );
                    $( '.grid-loading' ).hide();
                    return false;
                }
                lastId = ( msg.aaData.length > 0 ) ? msg.aaData[msg.aaData.length - 1][0] : 0;
                fnCallback( msg );
                $( '.grid-loading' ).hide();
            }
        } ); //End Ajax Call
    }
} );
}

Mike H. · Accepted Answer · 2014-04-01 17:30:18Z

1

Assuming you have access to the dataTable's data array and it is of the form:

var array = [ 
               { name: "somename", value: "somevalue" },
               { name: "somename2", value: "somevalue2" }
           ];

You can do a simple descending sort based on the value with the following:

array.sort(SimpleCompareDescOnValue);

Given the function:

function SimpleCompareDescOnValue(a, b) {
        // Use caution so as not to define 'undefined'.  It's not a great practice but it works.
        var c = a.length != undefined ? Math.max.apply(Math, a.map(function (o) { return o.value; })) : a.value;
        var d = b.length != undefined ? Math.max.apply(Math, b.map(function (o) { return o.value; })) : b.value;

        if (c > d)
            return -1;
        if (c < d)
            return 1;
        return 0;
    }

Not sure if this helps you at all. I've never used the dataTable library (although it looks cool) but I have to assume you can access the data after pulling it from the server and it only makes sense that it would be stored in arrays at some level.

answered Apr 1, 2014 at 17:30

Mike H.

1,7519 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

cpound Over a year ago

Thanks for the response. I wound up having to modify the aaSorting property to the specific column desc in datatables.Jquery. And giving the sType of 'date' on that column. Sorting by date desc seems to have slowed things down a bit but that's another discussion!

Collectives™ on Stack Overflow

Cannot specify a default column sort of datatables javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related