jquery - Datatables 1.10 - TD 中的 HTML5 "data-order"attr 无效

Question

我在订购包含 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();
            },

我在 Laravel 项目中使用来自 Chumper/datatables 的 composer 包实现此 DataTable，这意味着数据源是 Ajax，并使用服务器端处理。

提前致谢!

Answer 1

CAUSE

通过查看 DataTables 源代码，似乎 HTML5 data- 属性仅在表初始化期间读取，并且仅用于静态数据。

SOLUTION

解决方案#1

对于服务器端处理，您可能会考虑发送一个值以进行排序，同时发送一个值以仅在特定单元格的单元格中显示。参见 Orthogonal data example获取更多信息。

基本上，对于结构如下的行数据:

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

DataTables 初始化代码应该是:

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