DataTables: Columns with dot (.) in header not displaying correctly

Question

DataTables seems to treat dots (.) as a special character and doesn't display the columns, which have them in the header.

Is there any solution how to keep the dots and use some sort of escape character?

The error is: Requested unknown parameter 'Doc.' for row 0, column 0

My JSON DataTable initializer:

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

It's perfectly fine to use dots in header title with `title`. However when [`data`](http://datatables.net/reference/option/columns.data) option is a string, dots `.` are treated the special way, see [documentation](http://datatables.net/reference/option/columns.data) for more details. Solution is to avoid using dots in `data` attribute. — Gyrocode.com, Nov 14 '15 at 20:34

davidkonrad · Accepted Answer · 2015-11-17T17:48:04.070

When there is dots in data property names dataTables will look for nested data properties. Like if there was as Doc.<something> property. When you have automated scripts - as you have - the server is distributing JSON not necessarily designed for dataTables, you can "sanitize" the data before passing it to dataTables.

I took the answer from yesterday and added two functions : sanitizeData and sanitizeColumns. sanitizeData removes all dots and whitespaces from keys, sanitizeColumns remove whitespace and dots from the columns.data definitions :

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

demo -> http://jsfiddle.net/egpxdsq7/

The problem is not with DataTables not using `json[propName]`. When [`data`](http://datatables.net/reference/option/columns.data) option is a string, dots `.` are treated the special way, see [documentation](http://datatables.net/reference/option/columns.data) for more details. Otherwise, great answer! — Gyrocode.com, Nov 14 '15 at 20:33
@Gyrocode.com, OK - thank you for that, you have a good point - but there is dozens of `col.mData` etc references all over the code. Have updated the answer so it reflects your point. — davidkonrad, Nov 17 '15 at 17:52

score 2 · Answer 2 · answered Nov 13 '15 at 11:39

2

Try this:

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

Though this also works:

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

answered Nov 13 '15 at 11:39

annoyingmouse

5,524
1
27
45

I'm getting **Requested unknown parameter 'Doc.' for row 0, column 0** – Peter G. Nov 13 '15 at 11:46
For your suggestion I'm getting an exception `Uncaught SyntaxError: Unexpected token ILLEGAL` in the browser console – Peter G. Nov 13 '15 at 11:55
I think it may be because I'm using a JSONP object, which gets treated like jacascript it may be causing the error with `.`. Anyway the solution from the other answer worked. – Peter G. Nov 13 '15 at 13:00

score 1 · Answer 3 · answered Jan 14 '20 at 20:44

I know I am late to the party, but the way I resolved this was to replace all "." with "\\." in the "columns" value in the datatable options.

Datatables will still find the value with a period, and won't crash. I found this info here: https://datatables.net/reference/option/columns.data

All I did while adding items into the column object was run this:

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,
    };

DataTables: Columns with dot (.) in header not displaying correctly

3 Answers3

Linked