如何按字符串值中的天数对数据表进行排序
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 中的数据。
我目前在我的 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 中的数据。