使用 window.dtDefaultOptions 时如何对数据表列进行默认排序

Posted 2023-05-09

【中文标题】使用 window.dtDefaultOptions 时如何对数据表列进行默认排序

【英文标题】：How to have a default sort on a datatable column while using window.dtDefaultOptions

【发布时间】：2019-08-27 00:54:20

【问题描述】：

我正在寻找一种方法，让我的表格按日期降序排列。我浏览了有关排序的数据表文档，但在使用window.dtDefaultOptions 时没有找到可行的解决方案。似乎window.dtDefaultOptions.order = [[3, "desc"]] 应该是完成此任务的方法，但它对我不起作用。

我也试过window.dtDefaultOptions.columnDefs = [orderable: true, targets: 3]，但这也没有解决问题。

这是我在 index.blade 中的代码：

$(document).ready(function () 
    window.dtDefaultOptions.ajax = '!! route(' admin.feedback.index ') !!';
    window.dtDefaultOptions.stateSave = true;
    //window.dtDefaultOptions.scrollY = '50vh';
    window.dtDefaultOptions.scrollCollapse = true;

    window.dtDefaultOptions.order = [[3, "desc"]];

    window.dtDefaultOptions.columns = [
            data: 'user.name',
            name: 'user.name'
        , 
            data: 'type',
            name: 'type'
        , 
            data: 'comment',
            name: 'feedback.comment'
        , 
            data: 'date',
            name: 'created_at'
        , 
            data: 'actions',
            name: 'actions',
            searchable: false,
            sortable: false
        
    ];
    window.dtDefaultOptions.buttons = [];
    processAjaxTables();
);        

【参考方案1】：

我找到了一种通过在渲染时降序来使列排序的方法。

window.dtDefaultOptions = 
            columnDefs: [],
            "order": [3,'desc'],
        ;

问题是要让它工作，我必须删除或注释掉 saveState 和 scrollCollapes 代码行。

    $(document).ready(function () 
        window.dtDefaultOptions.ajax = '!! route('admin.feedback.index') !!';
        window.dtDefaultOptions = 
            columnDefs: [],
            "order": [3,'desc'],
        ;
        //window.dtDefaultOptions.stateSave = true;
        //window.dtDefaultOptions.scrollY = '50vh';
        //window.dtDefaultOptions.scrollCollapse = true;
        window.dtDefaultOptions.columns = [
             data: 'user.name', 
             name: 'user.name'
         , 
             data: 'type', 
             name: 'type'
         , 
             data: 'comment', 
             name: 'feedback.comment'
         , 
             data: 'date', 
             name: 'created_at'
         , 
             data: 'actions', 
             name: 'actions', searchable: false, sortable: false
         
      ];
        window.dtDefaultOptions.buttons = [];
        processAjaxTables();
    );

所以我们有一个适用于所述问题的答案，但它破坏了代码的其他方面。在这种情况下，我可以忍受这一点，因为在这个特定的表上，列顺序比 stateSave 和 scrollCollapse 更重要。但是，如果有人知道如何与 stateSave 和 scrollCollapse 一起实现列顺序，我会有兴趣学习。