Datatables - столбец сортировки, содержащий возрастной диапазон / накопительный фильтр YADCF

Я использую Datatables, чтобы показать группы, фазы и возраст (диапазоны). Теперь столбец, содержащий возрастной диапазон, сортируется как строка, но я бы хотел, чтобы он сортировался по возрастному диапазону. Поэтому возраст 10-12 лет наступает до 3-8 лет, а 4-10 лет - до 4-8 лет.

Кроме того, я использую YADCF для реализации кумулятивной фильтрации, идея заключается в следующем:

  1. Вы видите полный обзор.
  2. Вы выбираете свой возраст (диапазон)
  3. Список этапов должен содержать только элементы, основанные на предыдущем выборе.
  4. Будут показаны только группы, соответствующие возрастному диапазону и выбранной фазе.

Вопрос 1

Как мне получить функцию сортировки для столбца Возраст? Пробовал разные вещи, но без разницы.

вопрос 2

Когда для параметра "cumulative_filtering" задано значение true, я получаю ошибку JS "TypeError: t.split не является функцией", которая, как мне кажется, связана с data.Age.Min и data.Age.Max.

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 Fiddle здесь: https://jsfiddle.net/Webkungen/kmorw24f/2/

Источник

0 ответов

Что касается вопроса 1, вы должны реализовать свою собственную функцию сортировки sort_as_custom_func (читать документы)

Что касается вопроса 2, вам нужно установить столбцы в column_data_type: "rendered_html", и реализовать column_data_render функции, читайте больше в соответствующей теме(пока не задокументировано)

Я реализовал это для вас здесь

следующее

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

});

Источник
Другие вопросы по тегам