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

Posted 2023-05-07

【中文标题】排序在 jQuery 数据表中不起作用

【英文标题】：Sorting is not working in jQuery datatables

【发布时间】：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 你找到解决办法了吗？

【参考方案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 可以不做这项工作吗？