我正在使用数据表来显示组,阶段和年龄(范围)。现在,包含年龄范围的列按字符串排序,但我希望它按年龄范围排序。 因此,年龄10-12在3-8之前,而4-10在4-8之前。
最重要的是,我正在使用YADCF进行累积过滤,其思想是:
问题1
如何实现“年龄”列的排序功能?尝试过各种方法,但没有区别。
问题2
当将“ cumulative_filtering”选项设置为true时,我收到一个JS错误“ TypeError:t.split不是函数”,我想这与data.Age.Min和data.Age.Max。< / p>
HTML
<label for="AgeFilter" class="sr-only">Age</label>
<div id="AgeFilter"></div>
<label for="PhaseFilter" class="sr-only">Phase</label>
<div id="PhaseFilter"></div>
<table id="Table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phase</th>
<th>Age</th>
</tr>
</thead>
</table>
JS
$(function(){
var DT = $('#Table').DataTable( {
data: [{"Id":0,"Name":"Group 0","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":3,"Max":8}},{"Id":1,"Name":"Group 1","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":3,"Max":8}},{"Id":2,"Name":"Group 2","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":3,"Max":8}},{"Id":3,"Name":"Group 3","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":3,"Max":8}},{"Id":4,"Name":"Group 4","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":3,"Max":8}},{"Id":5,"Name":"Group 5","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":4,"Max":8}},{"Id":6,"Name":"Group 6","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":4,"Max":8}},{"Id":7,"Name":"Group 7","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":4,"Max":8}},{"Id":8,"Name":"Group 8","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":4,"Max":8}},{"Id":9,"Name":"Group 9","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":4,"Max":8}},{"Id":10,"Name":"Group 10","Phase":{"Id":1,"Name":"Phase 1"},"Age":{"Min":4,"Max":8}},{"Id":11,"Name":"Group 11","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":4,"Max":10}},{"Id":12,"Name":"Group 12","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":4,"Max":10}},{"Id":13,"Name":"Group 13","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":4,"Max":10}},{"Id":14,"Name":"Group 14","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":4,"Max":10}},{"Id":15,"Name":"Group 15","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":4,"Max":10}},{"Id":16,"Name":"Group 16","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":10,"Max":12}},{"Id":17,"Name":"Group 17","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":10,"Max":12}},{"Id":18,"Name":"Group 18","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":10,"Max":12}},{"Id":19,"Name":"Group 19","Phase":{"Id":2,"Name":"Phase 2"},"Age":{"Min":10,"Max":12}}],
autoWidth: false,
pageLength: -1,
order: [[ 2, "asc" ], [ 3, "asc" ]],
columnDefs: [
{ targets: 0, data: "Id" },
{ targets: 1, data: 'Name' },
{ targets: 2, data: function ( data, type, val, meta ) {
if (type === 'display') {
return data.Phase.Name;
}else if (type === 'filter') {
return data.Phase.Name;
}
// 'sort', 'type' and undefined all just use the integer
return data.Phase.Id;
} },
{ targets: 3, data: function ( data, type, val, meta ) {
if (type === 'display') {
if(data.Age.Min == data.Age.Max) return data.Age.Max;
return data.Age.Min + '-' + data.Age.Max;
}else if (type === 'filter') {
return data.Age.Min + '-' + data.Age.Max;
}
// 'sort', 'type' and undefined all just use the integer
return [data.Age.Min,data.Age.Max];
} }
]
});
yadcf.init(DT, [
{
column_number : 2,
filter_container_id: 'PhaseFilter',
filter_default_label: 'Phase',
//filter_reset_button_text: false,
filter_match_mode: 'exact',
style_class: 'form-control'
},
{
column_number : 3,
filter_container_id: 'AgeFilter',
filter_default_label: 'Age',
//filter_reset_button_text: false,
filter_match_mode: 'exact',
style_class: 'form-control',
sort_as: 'num'
}
], {
// cumulative_filtering: true
});
});
JS小提琴在这里:https://jsfiddle.net/Webkungen/kmorw24f/2/
关于自定义排序功能,我已经尝试过:
sort_as_custom_func: function(one,two) {
return (one < two);
},
问题是我似乎无法访问Age.Min和Age.Max,其中一个和两个值仍然是字符串,即3-8,所以不了解如何比较这两个值。
答案 0 :(得分:0)
关于问题1,您应该实现自己的自定义排序功能sort_as_custom_func
(阅读文档)
关于问题2,您需要将列设置为column_data_type: "rendered_html",
,并且要实现column_data_render
功能,请在related issue中阅读更多内容
(尚未记录)
如下
yadcf.init(DT, [
{
column_number : 2,
filter_container_id: 'PhaseFilter',
filter_default_label: 'Phase',
//filter_reset_button_text: false,
filter_match_mode: 'exact',
style_class: 'form-control',
column_data_type: "rendered_html",
column_data_render: function (data) {
return data.Phase.Name;
}
},
{
column_number : 3,
filter_container_id: 'AgeFilter',
filter_default_label: 'Age',
//filter_reset_button_text: false,
filter_match_mode: 'exact',
style_class: 'form-control',
sort_as: 'num',
column_data_type: "rendered_html",
column_data_render: function (data) {
return data.Age.Min + '-' + data.Age.Max;
}
}
], {
cumulative_filtering: true
});
});