如何在 SearchPanes 中为 DataTables 指定自定义选项顺序答案

【问题标题】：How to specify custom order of options in SearchPanes for DataTables如何在 SearchPanes 中为 DataTables 指定自定义选项顺序
【发布时间】：2021-05-15 07:19:27
【问题描述】：

我有一个自定义搜索窗格，希望以特定顺序显示选项。

这是窗格定义：

                    {
                        header: "Dzień",
                        options: [
                            { label: 'poniedziałek', value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "MONDAY"); } },
                            { label: 'wtorek',       value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "TUESDAY"); } },
                            { label: 'środa',        value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "WEDNESDAY"); } },
                            { label: 'czwartek',     value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "THURSDAY"); } },
                            { label: 'piątek',       value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "FRIDAY"); } },
                            { label: 'sobota',       value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "SATURDAY"); } },
                            { label: 'niedziela',    value: function(rowData, rowIdx) { return dayOfWeek(this, rowIdx, "SUNDAY"); } }
                        ],
                        dtOpts: {
                            searching: false
                        }
                    },

以上按字母顺序排列选项，我更愿意自己指定顺序，例如通过为每个选项分配一个数字。 SearchPanes 可以吗？我找不到执行此操作的内置选项。

此外，除了自定义窗格之外，是否可以在非自定义窗格上进行类似的排序？

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

您可以在dtOpts 选项中添加渲染函数，并使用正交数据为显示定义自定义排序顺序：

dtOpts: {
  searching: false,
  columnDefs: [ { 
    targets: [0], 
    render: function ( data, type, row, meta ) {
      if (type === 'sort') {
        var dayNum;
        switch(data) {
          case 'poniedziałek':
            dayNum = 1;
            break;
          case 'wtorek':
            dayNum = 2;
            break;
          case 'środa':
            dayNum = 3;
            break;
          case 'czwartek':
            dayNum = 4;
            break;
          case 'piątek':
            dayNum = 5;
            break;
          case 'sobota':
            dayNum = 6;
            break;
          case 'niedziela':
            dayNum = 7;
            break;
        }
        return dayNum; 
      } else {
       return data;
     }
    }
  } ],
  order: [[0, 'asc']] // you may not need this line
}

之所以有效，是因为 (a) 窗格本身就是一个小型 DataTable，并且 (b) dtOpts 选项允许您指定针对该窗格的标准 DataTables 选项。

您可能不需要order: [[0, 'asc']] - 我希望窗格无论如何都会使用它作为默认值。但是我把它包括在内以防万一，因为我没有主表的任何测试数据。

我的最终结果：

我没有尝试过，但我认为您可以对非自定义窗格执行相同的操作（即他们也需要这种自定义。）

【讨论】：

谢谢，这正是我需要的。