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

【问题标题】：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 属性中使用点。

标签： json datatable datatables datatables-1.10 jquery-datatables-editor

【解决方案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&#46;",
        "title": "Doc&#46;"
    },
    {
        "data": "Order no&#46;",
        "title": "Order no&#46;"
    }
],
"data": [
    {
        "Doc&#46;": "564251422",
        "Order no&#46;": "56421"
    },
    {
        "Doc&#46;": "546546545",
        "Order no&#46;": "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,
    };

【讨论】：