Special characters in DataTable column names in JQuery/Javascript

Question

EDIT : I have created this fiddle that shows the issue.

I define my columns the following way (pseudo-code, please don't tell me to declare the variables)

var cols = [];
cols.push({
    data:theNameWithSpecialCharacters,
    title:theNameWithSpecialCharacters,
    render: $.fn.dataTable.render.number(",",".",3)
});

myDataTable = $('#theDataTable').DataTable({
    columns: cols,
    data: someDataInCorrectFormat
}).draw();

The datatable is correctly rendered but it doesn't show the values for the columns where there are some special characters ([ and ] in my case) in the column names.

Any and all help welcome.

Answer 1

If you are using the data option as a string, the brackets get interpreted as array notation. The datatables documentation states the following:

DataTables can automatically combine data from an array source, joining the data with the characters provided between the two brackets. For example: name[, ] would provide a comma-space separated list from the source array. If no characters are provided between the brackets, the original array source is returned.

So your data: "[bla]" is looking for a unnamed array (which does not exist hence the empty column) to display bla's between its elements. Unfortunately there seems to be no way to escape the brackets in the string. The easiest workaround would be to use data as a function and get the value from the object.

cols.push({
    data: function(row) {
      return row["[bla]"];
    },
    title:"[bla]",
    render: $.fn.dataTable.render.number(",",".",3)
});

This is your updated fiddle.

Edit: If you don't know the columns name like the OP mentioned in the comments, the data function can be used with the index of the column.

cols.push({
data: function(row, type, set, meta) {
  return row[theColumns[meta.col].theColumnName];
},
title: theColumns[i].theColumnName,
render: $.fn.dataTable.render.number(",",".",3)
});

Another fiddle.