数据表/YADCF和过滤器排序顺序 [英] Datatables / YADCF and filter sort order

问题描述

我正在使用数据表和yadcf在月份和工作日进行过滤，但是无法获得选择列表的排序权.

I'm using datatables and yadcf to filter on month and weekday, but cannot get the sorting right for the select lists.

<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'
        }
    ]);
} );

如何订购这些过滤器，以便它们订购1月，2月，3月和周一，周二，周三等的工作日?

How do I order these filters so they order January, February, March and the weekdays Monday, Tuesday, Wednesday etc.?

提琴: https://jsfiddle.net/Webkungen/jLq6okgc/2/

如果我为过滤器添加一个自定义排序功能，并为过滤器返回 data.Month.Id ，排序将是正确的，但是过滤器中将显示月份号而不是名称.

If I add a custom sort function for the filter and return data.Month.Id for the filter the sorting will be right but then the month number is shown in the filter instead of it's name.

感谢所有帮助，这使我发疯，谢谢！

Appreciate any help on this as it's driving me crazy, thanks!

推荐答案

您应使用 sort_as:'custom'， sort_as_custom_func:monthSort 并实现您自己的排序功能，这是一种快速的方法:

You should use the sort_as: 'custom', sort_as_custom_func: monthSort And implement your own sorting function, here is a quick way:

$(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和过滤器排序顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！