datatables中动态表头获取当前列数据时,数据为null,对应表头无法展示
时间: 2024-03-19 11:44:03 浏览: 125
在使用 Datatables 动态生成表头时,可能会出现获取当前列数据为 null 的情况。这通常是由于 Datatables 在初始化时并没有将对应的数据列与表头列进行关联。解决这个问题的方法是通过 `columns.render` 选项将数据列与表头列进行关联,具体操作如下:
1. 在 Datatables 初始化时,使用 `columns` 选项生成动态表头,例如:
```javascript
$(document).ready(function() {
$('#example').DataTable( {
ajax: 'data.json',
columns: [
{ data: 'name', title: 'Name' },
{ data: 'position', title: 'Position' },
{ data: 'office', title: 'Office' },
{ data: 'salary', title: 'Salary' }
]
} );
} );
```
2. 在 `columns.render` 中获取数据列对应的表头列,并返回对应的数据项,例如:
```javascript
$(document).ready(function() {
$('#example').DataTable( {
ajax: 'data.json',
columns: [
{ data: 'name', title: 'Name' },
{ data: 'position', title: 'Position' },
{ data: 'office', title: 'Office' },
{ data: 'salary', title: 'Salary',
render: function ( data, type, row ) {
return row.salary;
}
}
]
} );
} );
```
通过以上操作,您应该能够成功将数据列与表头列进行关联,并且在动态生成的表头中正确展示对应的数据项。
阅读全文