Question

我的数据表初始化如下

var table = $('#today').DataTable( {
    "ajax": '/getMainData/24102019/json',
    "ordering": false,
    enableFiltering: true,
    filterPlaceholder: 'Search for something...',
    "scrollY": 300,
    "scrollX": true,
    "pageLength": 500,
    "lengthMenu": [[100, 1000, -1], [100, 1000, "All"]],
    processing: true,
    'language':{ 
        "loadingRecords": "Loading ...",
        "processing": "Loading ..."
    },
    "columnDefs": [
        {
            "targets": [ 2,14 ],
            "visible": false,
            "searchable": true
        },
        { "width": "200px", "targets": [3,16,17] },
        { "width": "300px", "targets": [15] }
    ],
    colReorder: true,
    "initComplete":  function (settings, json) {
        afterTableInitialization(settings,json);
    }
    });

// RE-ORDER COLUMNS     
        function afterTableInitialization(settings, json) {
            console.log('[+] Column reordering');
            table.colReorder.order( [ 0,1,22,23,24,25,2,3,4,5,6,13,7,8,9,10,11,12,14,15,16,17,18,19,20,21,26 ] );
            $('#loading').modal('hide');
        }

到目前为止，一切都很好

但是我有一个选择菜单，它会触发如下所示的新ajax搜索

$('select#days').on('change', function() {
    $('select.multiselect').multiselect('deselectAll', false);
    table.ajax.url( '/getMainData/'+this.value+'/json' ).load();
    table.search( '' ).columns().search( '' ).draw();
});

显然，在这一点上，各列的位置是错误的。

但是，如果我将列重新设置为原始顺序，那么实际上并不会发生/工作，并且数据与列完全不同步。原始顺序似乎从未改变

有什么建议吗？

// GET NEW DATA BASED ON DROPDOWN VALUE
        $('select#days').on('change', function() {
            table.colReorder.reset();
            $('select.multiselect').multiselect('deselectAll', false);
            table.ajax.url( 'getMainData/'+this.value+'/json' ).load();
            table.search( '' ).columns().search( '' ).draw();
            table.colReorder.order( [ 0,1,22,23,24,25,2,3,4,5,6,13,7,8,9,10,11,12,14,15,16,17,18,19,20,21,26 ] );
        });

我尝试使用reset选项，并且列标题恢复为最初的状态。但是，colReorder似乎是在Ajax完成之前被触发的，因此再次不同步

Answer 1

您尝试使用colReorder.reset()吗？

$('select#days').on('change', function() {
    $('select.multiselect').multiselect('deselectAll', false);
    table.colReorder.reset();
    table.ajax.url( '/getMainData/'+this.value+'/json' ).load();
    table.search( '' ).columns().search( '' ).draw();
});

编辑

columnDefs: [
    {
      render: function(data, type, row) {
        return '<div>' + data + '</div>';
      },
      targets: 0
    },
    ...
]

jQuery：ColReorder设置为默认顺序

1 个答案: