排序在 jQuery 数据表中不起作用答案

【问题标题】：Sorting is not working in jQuery datatables排序在 jQuery 数据表中不起作用
【发布时间】：2017-06-01 14:24:24
【问题描述】：

我在一页中有两个内联表，排序只对一个数据表起作用，而对另一个数据表不起作用，一次调用两个 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 : true，但没有运气，我错过了什么吗？

【问题讨论】：

它在什么数据表中工作？第一个还是第二个？
第二种情况排序正在工作，因为我在最后调用了第二个数据表。
@tfidelis 你找到解决办法了吗？

标签： javascript jquery angularjs datatables datatables-1.10

【解决方案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 }
    ]
}); });

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

【讨论】：

"bSortable": 是的，这可以在Datatable中使用吗？ orderable 可以不做这项工作吗？