数据表/YADCF 和过滤器排序顺序
Datatables / YADCF and filter sort order
我正在使用数据表和 yadcf 按月份和工作日进行过滤,但无法对 select 列表进行正确排序。
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Month</th>
<th>Weekday</th>
</tr>
</thead>
</table>
var myData = [
{"Id":1,"Name":"Test 1","Month":{"Id":5,"Label":"May"},"Weekday":{"Id":3,"Label":"Tuesday"}},
{"Id":2,"Name":"Test 2","Month":{"Id":5,"Label":"May"},"Weekday":{"Id":3,"Label":"Tuesday"}}
...
];
$(function () {
var Table = $('#myTable').DataTable({
'data': myData,
"columns" : [
{ "targets": 0, "data" : "Id" },
{ "targets": 1, "data" : "Name" },
{ "targets": 2, "data": function ( data, type, val, meta ) {
if (type === 'display') {
return data.Month.Label;
}else if (type === 'filter') {
return data.Month.Label;
}
// 'sort', 'type' and undefined all just use the integer
return data.Month.Id;
} },
{ "targets": 3, "data": function ( data, type, val, meta ) {
if (type === 'display') {
return data.Weekday.Label;
}else if (type === 'filter') {
return data.Weekday.Label;
}
// 'sort', 'type' and undefined all just use the integer
return data.Weekday.Id;
} }
]
});
yadcf.init(Table, [
{
column_number : 2,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control'
},
{
column_number : 3,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control'
}
]);
} );
我如何订购这些过滤器,以便它们在一月、二月、三月和周一、周二、周三等工作日订购?
Fiddle:
https://jsfiddle.net/Webkungen/jLq6okgc/2/
如果我为过滤器添加自定义排序函数并为过滤器添加 return data.Month.Id ,排序将是正确的,但月份编号是显示在过滤器中而不是它的名称。
感谢任何帮助,因为它让我发疯,谢谢!
你应该使用 sort_as: 'custom',
sort_as_custom_func: monthSort
并实现你自己的排序功能,这里有一个快速的方法:
$(function () {
var Table = $('#myTable').DataTable({
'data': myData,
"columns" : [
{ "data" : "Id" },
{ "data" : "Name" },
{ "data" : "Month.Label" },
{ "data" : "Weekday.Label" }
]
});
yadcf.init(Table, [
{
column_number : 2,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control',
sort_as: 'custom',
sort_as_custom_func: monthSort
},
{
column_number : 3,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control'
}
]);
function monthSort(a, b){
var months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
return months.indexOf(a) - months.indexOf(b);}
} );
我正在使用数据表和 yadcf 按月份和工作日进行过滤,但无法对 select 列表进行正确排序。
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Month</th>
<th>Weekday</th>
</tr>
</thead>
</table>
var myData = [
{"Id":1,"Name":"Test 1","Month":{"Id":5,"Label":"May"},"Weekday":{"Id":3,"Label":"Tuesday"}},
{"Id":2,"Name":"Test 2","Month":{"Id":5,"Label":"May"},"Weekday":{"Id":3,"Label":"Tuesday"}}
...
];
$(function () {
var Table = $('#myTable').DataTable({
'data': myData,
"columns" : [
{ "targets": 0, "data" : "Id" },
{ "targets": 1, "data" : "Name" },
{ "targets": 2, "data": function ( data, type, val, meta ) {
if (type === 'display') {
return data.Month.Label;
}else if (type === 'filter') {
return data.Month.Label;
}
// 'sort', 'type' and undefined all just use the integer
return data.Month.Id;
} },
{ "targets": 3, "data": function ( data, type, val, meta ) {
if (type === 'display') {
return data.Weekday.Label;
}else if (type === 'filter') {
return data.Weekday.Label;
}
// 'sort', 'type' and undefined all just use the integer
return data.Weekday.Id;
} }
]
});
yadcf.init(Table, [
{
column_number : 2,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control'
},
{
column_number : 3,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control'
}
]);
} );
我如何订购这些过滤器,以便它们在一月、二月、三月和周一、周二、周三等工作日订购?
Fiddle: https://jsfiddle.net/Webkungen/jLq6okgc/2/
如果我为过滤器添加自定义排序函数并为过滤器添加 return data.Month.Id ,排序将是正确的,但月份编号是显示在过滤器中而不是它的名称。
感谢任何帮助,因为它让我发疯,谢谢!
你应该使用 sort_as: 'custom',
sort_as_custom_func: monthSort
并实现你自己的排序功能,这里有一个快速的方法:
$(function () {
var Table = $('#myTable').DataTable({
'data': myData,
"columns" : [
{ "data" : "Id" },
{ "data" : "Name" },
{ "data" : "Month.Label" },
{ "data" : "Weekday.Label" }
]
});
yadcf.init(Table, [
{
column_number : 2,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control',
sort_as: 'custom',
sort_as_custom_func: monthSort
},
{
column_number : 3,
filter_type: 'select',
filter_match_mode: 'exact',
style_class: 'form-control'
}
]);
function monthSort(a, b){
var months = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"];
return months.indexOf(a) - months.indexOf(b);}
} );