Sorting is not working in jQuery datatables

问题

I have two inline tables in one page, sorting is working on one data table but not on other, calling both div's at a time, but sorting is working on only one data table.

$('#div1').DataTable(
{
    "processing" : true,
    "destroy" : true,
    "paginate" : true,
    "lengthChange" : true,
    "filter" : true,
    "ordering" : true,
    "order" : [
        [ 1, "asc" ] 
    ],
    "info" : false,
    "reloadDT" : false,
    "autoWidth" : false,
    "scrollY" : 340,
    "language" : {
        "search" : "Search: ",
        "processing" : "<span class='loadingImg'></span>"
    },
    "oCustomization" : {
        "bFilterHidden" : false,
        "bApplyShortenPlugin" : false,
        "bInlineWithHeader" : false,
        bEnablePaginationControl : false
    },
    "lengthMenu" : 8,
        ajax : $.fn.dataTable.pipelineAdv({
        method : "GET",
        url : "someurl=" + param,
        cache : false,
        pages : Global.pageSize,
    }),
    sAjaxDataProp : "serverResponse.result",
    "sCountSelector" : "span.count",
    "dom" : "lCrtip",
    columns : [
    {
        "data" : null,
        "orderable" : false,
        searchable : false,
        "width" : aColumnWidth[0],
        "title" : "Some title",
        "className" : "center",
        targets : [ 0 ]
    },
    {
        "data" : "data1",
        "width" : aColumnWidth[1],
        'title' : jQuery.i18n
                .prop("vehicle.col1label"),
        "className" : "no-word-break",
        "orderable" : true
    },
    {
        "data" : "data2",
        "width" : aColumnWidth[2],
        "className" : "no-word-break",
        "title" : "Service Type",
    },
    {
        "data" : "data3",
        "width" : aColumnWidth[3],
        "className" : "no-word-break",
        "title" : jQuery.i18n
                .prop("elevated.dashboard.upcoming"),
    } ],

    "initComplete" : function(oSettings, json) {
    //some code here
    },
    "drawCallback" : function(oSettings) {
        if (oSettings.jqXHR) {
            $(oSettings.oInit.sCountSelector).text(
                oSettings.fnRecordsDisplay());
        }
    }
});


$('#div2').DataTable(
{
    "processing" : true,
    "destroy" : true,
    "paginate" : true,
    "lengthChange" : true,
    "filter" : true,
    "ordering" : true,
    "order" : [
        [ 1, "asc" ]
    ],
    "info" : false,
    "reloadDT" : false,
    "autoWidth" : false,
    "scrollY" : 341,
    "language" : {
        "search" : "Search: ",
        "processing" : "<span class='loadingImg'></span>"
    },
    "oCustomization" : {
        "bFilterHidden" : false,
        "bApplyShortenPlugin" : false,
        "bInlineWithHeader" : false,
        bEnablePaginationControl : false
    },
    "lengthMenu" : Global.aAdminLengthOption,
    ajax : $.fn.dataTable.pipelineAdv({
        method : "GET",
        url : "someurl=" + param,
        cache : false,
        pages : Global.pageSize,
    }),
    sAjaxDataProp : "serverResponse.result",
    "sCountSelector" : "span.Count",
    "dom" : "lCrtip",
    columns : [
        {
            "data" : null,
            "orderable" : false,
            searchable : false,
            "width" : aColumnWidth[0],
            "title" : "Some title",
            "className" : "center",
            targets : [ 0 ]
        },
        {
            "data" : "data1",
            "width" : aColumnWidth[1],
            'title' : jQuery.i18n
                    .prop("vehicle.col1label"),
            "className" : "no-word-break",
            "orderable" : true
        },
        {
            "data" : "data2",
            "width" : aColumnWidth[2],
            "className" : "no-word-break",
            "title" : "Service Type",
        },
        {
            "data" : "data3",
            "width" : aColumnWidth[3],
            "className" : "no-word-break",
            "title" : jQuery.i18n
                    .prop("elevated.dashboard.upcoming"),
        } 
    ],

    "initComplete" : function(oSettings, json) {
    //some code here
    },
    "drawCallback" : function(oSettings) {
        if (oSettings.jqXHR) {
            $(oSettings.oInit.sCountSelector).text(
                oSettings.fnRecordsDisplay());
            }   
        }

});

Also tried adding orderable : true, but no luck, did i miss anything?

回答1:

This should get you what you need

$(document).ready(function() {
$("#div2").dataTable({
    aaSorting: [[2, 'asc']],
    bPaginate: false,
    bFilter: false,
    bInfo: false,
    bSortable: true,
    bRetrieve: true,
    aoColumnDefs: [
        { "aTargets": [ 0 ], "bSortable": true },
        { "aTargets": [ 1 ], "bSortable": true },
        { "aTargets": [ 2 ], "bSortable": true },
        { "aTargets": [ 3 ], "bSortable": false }
    ]
}); });

The key is the aaSorting option. you can find it here though http://datatables.net/ref

来源：https://stackoverflow.com/questions/41698560/sorting-is-not-working-in-jquery-datatables