Как добавить кастомную сортировку в datatables.js?

Question

[Артур]

На странице таблица формируется на бекенде (чекбоксами указываются отображаемые колонки).
По классу, на таблицу навешиваются сортировки datatables.

(function(){
        var tables = document.querySelectorAll('.grid-view .table-sortable');

        tables.forEach(function (table) {
            var dataRows = table.querySelectorAll('tbody tr');
            // если данных нет, то не вкллючаем сортировку
            if (dataRows.length > 1) {
                    $('table').dataTable({
                        paginate: false,
                        searching: false,
                        info: false,
                        ordering: true,
                        order: [],
                        columnDefs: [
                            {
                                targets: 'no-sort', //отменяем сортировку у столбцов с этим классом
                                orderable: false,
                            },
                        ],
                    });
                }
            }
        });
    })();

Как добавить кастомную сортировку к определенному столбцу таблицы? сейчас некорректно сортируется таблица
€111 < €2 461 < €26

а должно быть
€26 < €111 < €2 461

как правильно дополнить функционал?

Answer 1

[Stalker_RED]

Сейчас у вас эта колонка сортируется как строка текста. Исправляется так:

columns: [
                {title: "id", type: 'num'}, // магия здесь!
                {title: "Имя"},
                {title: "email"},
                {title: "Телефон"},
            ],

При этом числа не должны содержать пробелов, а значок € должен добавляться только для отображения.

Ну или писать свою функцию sort (искать готовую?) типа как здесь
www.datatables.net/plug-ins/sorting

Comments

[Артур]

написал свою сортировку, но она почему то не применяется, в чем косяк?

function _anyNumberSort(a, b, high) {
            var reg = /[+-]?((\d+(\.\d*)?)|\.\d+)([eE][+-]?[0-9]+)?/;
            a = a.replace(',','.').replace(/ /g,'').match(reg);
            a = a !== null ? parseFloat(a[0]) : high;
            b = b.replace(',','.').replace(/ /g,'').match(reg);
            b = b !== null ? parseFloat(b[0]) : high;
            console.log(a);
            console.log(b);
            return ((a < b) ? -1 : ((a > b) ? 1 : 0));
        };

        jQuery.extend( jQuery.fn.dataTableExt.oSort, {
            "any-number-asc": function (a, b) {
                return _anyNumberSort(a, b, Number.POSITIVE_INFINITY);
            },
            "any-number-desc": function (a, b) {
                return _anyNumberSort(a, b, Number.NEGATIVE_INFINITY) * -1;
            }
        });

в настройках таблицы

columnDefs: [
                            {
                                type: 'any-number',
                                targets: 'any-number',
                            },
                            {
                                targets: 'no-sort', //отменяем сортировку у столбцов с этим классом
                                orderable: false,
                            },
                        ],

[Артур]

функция работает, но на странице сортировка не происходит.

мой косяк был, указывал не в той ветви условия.

все заработало

Answer 2

[iBird Rose]

К примеру есть атрибут "data-order" https://datatables.net/manual/data/orthogonal-data

Answer 3

[dollar]

Нужно привести все числа (в строковом формате) к единой длине, добавив пробелы.

€   26
€  111
€2 461

Это самый простой, но не самый правильный способ.

А по-хорошему сортировка должна быть умной. Для этого сортировке обычно скармливается функция сравнения вида cmp(a,b) в которой и производится сравнение двух элементов. Там и должна находиться вся магия, а именно - приведение цен к числам и сравнение уже самих чисел. Смотрите документацию к datatables.js, изучайте исходник. Возможно, такой возможности из коробки там вообще нет, тогда нужно допиливать или использовать другое решение.