Datatables 1.10 - TD中的HTML5“data-order”属性无效

Question

Datatables 1.10 - TD中的HTML5“data-order”属性无效

jqueryhtmlsortingdatatablesdatatables-1.10

8

我在对包含HTML的列进行排序时遇到了问题。 1.10文档中指出默认情况下应该可以解决此问题，但实际上并不能。然后我查看了1.10的新功能，并发现如果在同一列中的每个TD元素中都有"data-order"属性，则可以通过这些属性进行排序。完美！问题是，我无法使其正常工作。

奇怪的是，当页面是静态的时，他们提供的示例按预期工作，但是当数据和表格动态加载时却没有按照预期工作。

我使用以下选项和修改来初始化表格以添加属性。需要进行无效化操作以告诉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();
            },

我正在使用Chumper/datatables这个composer包在Laravel项目中实现这个DataTable，这意味着数据源是Ajax，并且使用了服务器端处理。谢谢！

- Marty

3

罗伯特，小建议：简单的搜索可以带你走得更远。 - Marty

提示：你是想让别人回答你的问题，如果你不让别人费力去弄清楚你的问题是什么，那么这种情况更有可能发生。 - robertc

5

我向比我更熟悉 DataTables（datatables.net）的人解释了我的问题，并说明他们可能需要什么来回答我的问题。 - Marty

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gyrocode.com · Accepted Answer

原因

从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"
}

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