如何按字符串值中的天数对数据表进行排序

How to sort Datatable by days in string value

我目前在我的 laravel 项目中使用 Datatable 来显示我的数据库中的日常配置。我想按以下顺序显示我的数据,周一 -> 周二 -> 周三等

目前,它是按字母顺序从我的数据库中排序的,其中日期列存储为字符串。下面是我的 javascript 我的 table 的代码。

 var ophrTables = $('#ophrs_table').DataTable({ 
            stateSave: true,
            columnDefs: [{
                    "searchable": false,
                    "orderable": false,
                    "targets": 0
            },{
                    "searchable": true,
                    "orderable": true,
                    "targets": 1
            },{
                    "searchable": false,
                    "orderable": false,
                    "targets": 2
            },{
                    "searchable": false,
                    "orderable": false,
                    "targets": 3
            }],
            order: [[ 1, 'asc' ]]
        });

我认为您不能按天订购。也许你可以在数据表列中放置一个隐藏文本。

现在

<td>Monday</td>
<td>Tuesday</td>
<td>Friday</td>

改为

<td><span style="display:none">1</span>Monday</td>
<td><span style="display:none">2</span>Tuesday</td>
<td><span style="display:none">5</span>Friday</td>

改成这个样式后,就可以按天点单了

这里有两种方法:


使用列呈现器

您可以创建从日期名称到数字的映射:

var days = { 'Monday': 1, 'Tuesday': 2, 'Wednesday': 3, 'Thursday': 4, 'Friday': 5, 'Saturday': 6, 'Sunday': 7 };

然后您可以在创建数据表时使用该映射。

这是我的测试数据 HTML table:

    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Day</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>Monday</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Tuesday</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Wednesday</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Thursday</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Friday</td>
            </tr>
            <tr>
                <td>Brielle Williamson</td>
                <td>Saturday</td>
            </tr>
            <tr>
                <td>Herrod Chandler</td>
                <td>Sunday</td>
            </tr>
        </tbody>
    </table>

这是我的 DataTable 定义:

$('#example').DataTable( {
  "columnDefs": [ {
    "targets": 1,
    "render": function ( data, type, row, meta ) {
      if (type === 'sort') {
        return days[data];
      } else {
        return data;
      }
    }
  } ]
} );

对于第二列(索引 = 1),我使用渲染函数将日期名称映射为整数。 DataTables 将使用此整数进行排序操作 (type === 'sort')。否则它将使用当天的名称。

days[data] 表达式用于从我的 days 变量中查找相关数字。

按日期名称排序后的数据如下所示:

警告:

当您使用从字母数字数据生成数字排序数据的渲染器时,您必须小心。尽管数字用于排序,但它们 被视为字母数字 。在我们的例子中,这没有区别,因为字符串值“1”到“7”的排序方式与整数值 1 到 7 的排序方式相同。

但是如果您想对一年中的月份做类似的事情,那么您会 运行 遇到问题,因为十月 (10)、十一月 (11) 和十二月 (12) 可能会出错-排序。

对此的一个解决方法是强制将列视为默认包含数字数据:"type": "num",。感谢 强调了这个潜在问题。

(将 return 值强制为整数无济于事:return parseInt(days[data]);)。


委托排序

另一种方法是在将数据加载到 table 时将相关数字填充到额外的列中。

在您的 DataTable 定义中,您可以隐藏此列:

"columnDefs": [
  { "visible": false, "targets": 2 }
]

然后您可以使用 DataTables orderData 选项将可见的“日期名称”列的排序委托给隐藏的“日期编号”列:

"columnDefs": [
  { "visible": false, "targets": 2 },
  { "orderData": [ 1 ],    "targets": 2 }
]

这会告诉 DataTables 在按列索引 1 排序时使用列索引 2 中的数据。