DataTables ColumnDefs选项

DataTables ColumnDefs选项
DataTables是一个jQuery插件,可用于为网页的HTML表格添加互动和高级控件。这也使得表中的数据可以根据用户的需要进行搜索、排序和过滤。DataTable还暴露了一个强大的API,可以进一步用来修改数据的显示方式。
ColumnDefs选项允许你将特定的选项分配给表中的列。它可以是一个以上的列。
语法:
columnDefs: [
{ columnOptions },
{ columnOptions }
选项值:该选项有一个上面提到的和下面描述的单一价值。
array:这需要一个包含列的值的数组
示例 1:
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
GeeksForGeeks
DataTables columnDefs Option
Sno. | gfg | language |
---|---|---|
1 | gfg1 | HTML |
2 | gfg2 | jQuery |
3 | gfg3 | JavaScript |
4 | gfg4 | ReactJS |
(document).ready(function () {
('#gfg').DataTable({
columnDefs: [
{ targets: [0, 1, 2], visible: true },
{ targets: '_all', visible: false }
]
});
});
输出:
示例 2:
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
GeeksForGeeks
DataTables columnDefs Option
Sno. | gfg |
---|---|
1 | gfg1 |
2 | gfg2 |
3 | gfg3 |
4 | gfg4 |
5 | gfg5 |
6 | gfg6 |
7 | gfg7 |
8 | gfg8 |
9 | gfg9 |
10 | gfg10 |
11 | gfg11 |
12 | gfg12 |
(document).ready(function () {
('#gfg').DataTable({
columnDefs: [
{ targets: [0, 1], visible: true },
{ targets: '_all', visible: false }
]
});
});
输出: