数据表：标题中带有点 (.) 的列未正确显示

Posted 2023-05-07

【中文标题】数据表：标题中带有点 (.) 的列未正确显示

【英文标题】：DataTables: Columns with dot (.) in header not displaying correctly

【发布时间】：2016-02-14 23:04:54

【问题描述】：

DataTables 似乎将点 (.) 视为特殊字符，并且不显示在标题中包含它们的列。

有什么解决方案如何保留点并使用某种转义字符？

错误是：请求的未知参数“Doc.”对于第 0 行第 0 列

我的 JSON 数据表初始化器：

    "columns": [
        
            "data": "Doc.",
            "title": "Doc."
        ,
        
            "data": "Order no.",
            "title": "Order no."
        
    ],
    "data": [
        
            "Doc.": "564251422",
            "Order no.": "56421"
        ,
        
            "Doc.": "546546545",
            "Order no.": "98745"
        
    ]

【问题讨论】：

在标题标题中使用点与title 是完全可以的。但是，当data 选项是一个字符串时，点. 会以特殊方式处理，有关详细信息，请参阅documentation。解决方案是避免在data 属性中使用点。

【参考方案1】：

当数据属性名称中有点时，dataTables 将查找嵌套的数据属性。就像有 Doc.<something> 属性一样。当您拥有自动化脚本时 - 正如您所拥有的那样 - 服务器正在分发不一定为 dataTables 设计的 JSON，您可以在将数据传递给 dataTables 之前“清理”数据。

我从昨天的答案中添加了两个函数：sanitizeData 和 sanitizeColumns。 sanitizeData 从键中删除所有点和空格，sanitizeColumns 从 columns.data 定义中删除空格和点：

$.getJSON('https://api.myjson.com/bins/4z5xd', function(json) 
    //remove whitespace and dots from keys / attribute names    
    function sanitizeData(jsonArray) 
        var newKey;
        jsonArray.forEach(function(item) 
            for (key in item) 
                newKey = key.replace(/\s/g, '').replace(/\./g, '');
                if (key != newKey) 
                    item[newKey]=item[key];
                    delete item[key];
                     
                
        )    
        return jsonArray;
                
    //remove whitespace and dots from data : <propName> references
    function sanitizeColumns(jsonArray) 
        var dataProp;
        jsonArray.forEach(function(item) 
            dataProp = item['data'].replace(/\s/g, '').replace(/\./g, '');
            item['data'] = dataProp;
        )
        return jsonArray;
        
    json.data = sanitizeData(json.data);
    json.columns = sanitizeColumns(json.columns);    

    $('#example').DataTable(
       data : json.data,
       columns : json.columns
    )
);  

演示 -> http://jsfiddle.net/egpxdsq7/

【讨论】：

问题不在于 DataTables 不使用 json[propName]。当data 选项是一个字符串时，点. 被特殊处理，更多细节参见documentation。否则，很好的答案！

@Gyrocode.com，好的 - 谢谢你，你的观点很好 - 但是代码中有几十个 col.mData 等引用。已更新答案以反映您的观点。

【参考方案2】：

试试这个：

"columns": [
    
        "data": "Doc.",
        "title": "Doc."
    ,
    
        "data": "Order no.",
        "title": "Order no."
    
],
"data": [
    
        "Doc.": "564251422",
        "Order no.": "56421"
    ,
    
        "Doc.": "546546545",
        "Order no.": "98745"
    
]

虽然这也有效：

"columns": [
    
        "data": "Doc.",
        "title": "Doc."
    ,
    
        "data": "Order no.",
        "title": "Order no."
    
],
"data": [
    
        "Doc": "564251422",
        "Order no": "56421"
    ,
    
        "Doc": "546546545",
        "Order no": "98745"
    
]

【讨论】：

我收到 请求的未知参数“文档”。对于第 0 行第 0 列

根据您的建议，我在浏览器控制台中收到了异常 Uncaught SyntaxError: Unexpected token ILLEGAL

我认为这可能是因为我使用的是 JSONP 对象，它被视为 jacascript 它可能会导致. 出现错误。无论如何，其他答案的解决方案有效。

【参考方案3】：

我知道我迟到了，但我解决这个问题的方法是替换所有“。”和 ”\\。”在数据表选项的“列”值中。

数据表仍然会找到带有句点的值，并且不会崩溃。我在这里找到了这个信息：https://datatables.net/reference/option/columns.data

我在将项目添加到列对象时所做的只是运行这个：

for(var i =0; i < columnNames.length;i++)
    //replaces all "." with "\\." which datatables ignores
    columnNames[i] = columnNames[i].replace(/\./g,'\\.');


//other code goes here

var datatableOptions = 
        'data': myData,
        columns: tableColumns,
    ;