数据表 1.10 - TD 中的 HTML5“数据顺序”属性无效

Posted 2023-05-07

【中文标题】数据表 1.10 - TD 中的 HTML5“数据顺序”属性无效

【英文标题】：Datatables 1.10 - HTML5 "data-order" attr in TD takes no effect

【发布时间】：2014-08-25 11:38:00

【问题描述】：

我在订购包含 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，并使用服务器端处理。

提前致谢！

【问题讨论】：

robertc，提示：一个简单的搜索可以带你走得很远。

提示：您是希望他的问题得到解答的人，如果您不让人们努力找出您的问题所在，这种情况更有可能发生

我向比我更了解 DataTables 的人 (datatables.net) 提供了他们可能需要回答我的问题的内容，从而明确了我的问题。

【参考方案1】：

原因

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

解决方案

解决方案 #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;
        
    ]
);

【讨论】：

非常感谢！这个问题的答案有很多变化，但这是唯一对我有用的。另外，很好，您提供了 2 个替代解决方案。