Блог

У меня возникли проблемы с упорядочением столбца, в котором есть HTML. В документации к 1.10 указано, что об этом следует позаботиться по умолчанию, но это не так. Затем я изучил новые возможности 1.10 и увидел, что если бы для каждого элемента TD в одном столбце был атрибут «порядок данных», упорядочивание могло бы выполняться по указанным атрибутам. Идеально! Проблема в том, что я не могу заставить это работать.

Странно то, что приведенный ими пример этого, когда страница статична, работает так, как задумано, но не тогда, когда данные и таблица загружаются динамически.

Я инициирую таблицу со следующими параметрами и изменениями для добавления атрибутов. Аннулирование выполняется, чтобы сообщить Datatables, что его нужно перерисовать (я видел, что это где-то было необходимо):

 "createdRow": function ( row, data, index ) {
                if ( data[6] ) {
                    cell = $('td', row).eq(6);
                    value = cell.text();
                    if(value == "Ej fakturerad") {
                        cell.attr('data-order', 1);
                    }
                    else if(value == "Nej") {
                        cell.attr('data-order', 2);
                    }
                    else if(value == "Kredit") {
                        cell.attr('data-order', 3);
                    }
                    else if(value == "Ja") {
                        cell.attr('data-order', 4);
                    }
                }
                oTable
                    .row( index )
                    .invalidate()
                    .draw();
            },
  

Я реализую эту таблицу данных с помощью пакета composer из Chumper / datatables в проекте Laravel, что означает, что источником данных является Ajax и использует обработку на стороне сервера.

Заранее спасибо!

ПРИЧИНА

При взгляде на исходный код DataTables кажется, что атрибуты HTML5 data- считываются только во время инициализации таблицы и только для статических данных.

РЕШЕНИЕ

Решение # 1

Для обработки на стороне сервера вы можете рассмотреть возможность отправки значения для сортировки вместе со значением для отображения в ячейке только для определенных ячеек. Смотрите Пример ортогональных данных для получения дополнительной информации.

В принципе, для данных строк, структурированных следующим образом:

 {
    "name": "Tiger Nixon",
    "position": "System Architect",
    "salary": "$3,120",
    "start_date": {
        "display": "Mon 25th Apr 11",
        "timestamp": "1303682400"
    },
    "office": "Edinburgh",
    "extn": "5421"
}
  

Код инициализации таблиц данных должен быть:

 $(document).ready(function() {
    $('#example').dataTable( {
        ajax: "data/orthogonal.txt",
        columns: [
            { data: "name" },
            { data: "position" },
            { data: "office" },
            { data: "extn" },
            { data: {
                _:    "start_date.display",
                sort: "start_date.timestamp"
            } },
            { data: "salary" }
        ]
    } );
} );
  

В этом случае start_data.display было бы показано в таблице, но start_data.timestamp использовалось бы для сортировки.

Решение # 2

В качестве альтернативы вы можете использовать свойство columns.render для определения функции для определения значения для динамической сортировки, например:

 $('#example').dataTable({
    "columnDefs": [{
        "targets": 6,
        "data": "field_name",
        "render": function (data, type, full, meta) {
            if(type === 'sort'){
               if(data === "Ej fakturerad") {
                   data = 1;
               } else if(data === "Nej") {
                   data = 2;
               } else if(data === "Kredit") {
                   data = 3;
               } else if(data === "Ja") {
                   data = 4;
               }
            }

            return data;
        }
    }]
});