DataTables displaying blank cells but the rows have data-CodePudding

I am having a problem with the DataTables plug-in for jQuery. I am loading data with a JSON, but only some columns get their values displayed (see screenshot below).

No values being displayed for the three right columns

However, I printed the selected row from Datatables with console.log(table.row(this).data()) and the print shows that there is data for the columns that appear to hold no data. Furthermore, right I am setting the "defaultContent": "", but if I set it as "defaultContent": "Not set", DataTables displays "Not set" for all those blank values, which is expected, but means that somehow it is not reading the content from the rows. Please check the next screenshot with the console print with data on columns "Un.", "Quant.", "Total [€]".

Console print on the client showing that the row holds data for the columns that appear blank on the table

It's worth noting that I get no errors either on the server or on the client.

Has anyone gone through this?

EDIT: Included code snippet with the initialisation settings.

  modelParam = configurations.especialidades[modelName].modelParam
  tableParam = configurations.datatable.specs.tableParam
  colEspecialidade = configurations.datatable.specs.colName
  especialidade = configurations.especialidades[modelName].especialidade

  // Formatting columns array for DataTables
  let cols = (() => {
    let colArr = []
    jsonSheet[0].forEach(col => {
      colArr.push({ "data": col, "title": col, "defaultContent": "" })
    })
    return colArr
  })()

  // Creating new DataTable
  table = $('#selectionTable').DataTable({
    scrollY: '70vh',
    sScrollX: '100%',
    scrollCollapse: true,
    paging: false,
    lengthChange: false,
    autoWidth: false,
    select: true,
    cache: false,
    data: jsonSheet[1],
    columns: cols,
  })

  // Removing rows not compliant with the current model's specialization
  let indexes = table
    .rows()
    .indexes()
    .filter((value, index) => {
      return especialidade !== table.row(value).data()[colEspecialidade];
    })

  table.rows(indexes).invalidate().remove().draw()

jsonSheets[0] holds the following data:

[
    "Especialidade",
    "Artº",
    "Designação dos Trabalhos",
    "Item (BIM)",
    "Un.",
    "Quant.",
    "Total [€]",
    "Caract."
]

CodePudding user response：

It's a problem with some characters (dot and square brackets) that are present in your field names (Un. Quant. Total[€]) but that have a special meaning to DataTables when used in the column.data option.

dot is interpreted by DT not as a literal dot, but as a nested object syntax
square brackets are interpreted as array notation

In both cases, DT searches for data that are not found, so the column is empty.

You can see this codepen where it works perfectly removing these special characters from the field names.

You can also take a look at the DataTables doc page referring to this question (inside the string box).

A workaround for the dot is to escape it with a double slash, the square brackets unfortunately are not escapable.

Maybe in this case the function(row, type, set, meta ) syntax to set the data for the column could be a better choice.