DataTables 显示空白单元格但行有数据
DataTables displaying blank cells but the rows have data
jQuery 的 DataTables 插件出现问题。
我正在使用 JSON 加载数据,但只有一些列显示了它们的值(请参见下面的屏幕截图)。
No values being displayed for the three right columns
但是,我使用 console.log(table.row(this).data())
打印了 Datatables 中的选定行,打印结果显示列中有数据,但似乎没有数据。此外,我正在设置 "defaultContent": ""
,但是如果我将它设置为 "defaultContent": "Not set"
,DataTables 会为所有这些空白值显示“未设置”,这是预期的,但这意味着它以某种方式没有读取行中的内容。请检查控制台打印的下一张屏幕截图,其中包含列“Un.”、“Quant.”、“Total [€]”上的数据。
Console print on the client showing that the row holds data for the columns that appear blank on the table
值得注意的是,我在服务器或客户端上都没有收到任何错误。
有没有人经历过这个?
编辑:包含带有初始化设置的代码片段。
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]
包含以下数据:
[
"Especialidade",
"Artº",
"Designação dos Trabalhos",
"Item (BIM)",
"Un.",
"Quant.",
"Total [€]",
"Caract."
]
您的字段名称中存在的某些字符(点 和 方括号)存在问题 (Un. Quant. Total[€])
但是在 column.data
选项中使用时对 DataTables 具有 特殊意义。
- dot 被 DT 解释为不是文字点,而是 嵌套对象语法
- 方括号被解释为数组符号
在这两种情况下,DT 都会搜索未找到的数据,因此该列为空。
您可以看到这个 codepen 它可以完美地从字段名称中删除这些特殊字符。
你也可以看看 DataTables doc page 提到这个问题(在 string 框内)。
解决点的方法是用双斜杠将其转义,遗憾的是方括号无法转义。
也许在这种情况下,为列设置数据的 function(row, type, set, meta )
语法可能是更好的选择。
另见
jQuery 的 DataTables 插件出现问题。 我正在使用 JSON 加载数据,但只有一些列显示了它们的值(请参见下面的屏幕截图)。
No values being displayed for the three right columns
但是,我使用 console.log(table.row(this).data())
打印了 Datatables 中的选定行,打印结果显示列中有数据,但似乎没有数据。此外,我正在设置 "defaultContent": ""
,但是如果我将它设置为 "defaultContent": "Not set"
,DataTables 会为所有这些空白值显示“未设置”,这是预期的,但这意味着它以某种方式没有读取行中的内容。请检查控制台打印的下一张屏幕截图,其中包含列“Un.”、“Quant.”、“Total [€]”上的数据。
Console print on the client showing that the row holds data for the columns that appear blank on the table
值得注意的是,我在服务器或客户端上都没有收到任何错误。
有没有人经历过这个?
编辑:包含带有初始化设置的代码片段。
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]
包含以下数据:
[
"Especialidade",
"Artº",
"Designação dos Trabalhos",
"Item (BIM)",
"Un.",
"Quant.",
"Total [€]",
"Caract."
]
您的字段名称中存在的某些字符(点 和 方括号)存在问题 (Un. Quant. Total[€])
但是在 column.data
选项中使用时对 DataTables 具有 特殊意义。
- dot 被 DT 解释为不是文字点,而是 嵌套对象语法
- 方括号被解释为数组符号
在这两种情况下,DT 都会搜索未找到的数据,因此该列为空。
您可以看到这个 codepen 它可以完美地从字段名称中删除这些特殊字符。
你也可以看看 DataTables doc page 提到这个问题(在 string 框内)。
解决点的方法是用双斜杠将其转义,遗憾的是方括号无法转义。
也许在这种情况下,为列设置数据的 function(row, type, set, meta )
语法可能是更好的选择。
另见