javascript - 排序在 jQuery 数据表中不起作用

Question

我在一个页面中有两个内联表，排序在一个数据表上工作，但在另一个数据表上不起作用，一次调用两个 div，但排序只在一个数据表上工作。

$('#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());
            }   
        }

});

还尝试添加 orderable : 是的，但运气不好，我错过了什么吗？

Answer 1

这应该能满足您的需求

$(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 }
    ]
}); });

关键是排序选项。你可以在这里找到它 http://datatables.net/ref