在之前的样例中,我们都是在 html页面里的 thead 标签中配置表格列。
编号姓名出生日期
其实也可以在初始化 DataTables时,直接通过 columns属性来配置列。而且该属性还提供更加丰富的功能。
二十、每一列单独设置
1,基本用法
假设要显示如下表格:
(1)如果表格数据类型为数组可以这么配置:
$('#myTable').DataTable({
"ajax": 'data.txt',
"columns": [
{ title: '编号'},
{ title: '姓名'},
{ title: '出生日期'}
]
});
(2)如果表格数据类型为对象可以这么配置:
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id"},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: "birthday"}
]
});
(3)这样 html代码就很简单了:
2,样式相关的属性
(1)下面几个属性可以设置列的样式:
width:列宽
className:这里的 class会应用到 td上面
visible:是否显示当前列
cellType:单元格类型。可选值为:th、td
(2)使用样例
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id", width:"20%", className:"col1"},
{ title: '姓名', data: "name", width:"40%", className:"col2"},
{ title: '出生日期', data: "birthday", width:"40%", className:"col3"}
]
});
3,内容相关的属性
(1)defaultContent可以设置当内容为 null或 undefined时,用于显示的值。
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id"},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: "birthday", defaultContent:"--未知--"}
]
});
(2)使用 render可以设置自定义渲染器。比如我们判断第三列内容的字数,如果超过 4 个则直接截断并附上省略号。
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id"},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: "birthday",
// data:当前cell的data,这个data和type有关
// type:filter,display,type,sort
// row:当前行数据
// https://datatables.net/reference/option/columns.render
render: function (data, type, row, meta) {
return type === 'display' && data.length > 4 ?
'' + data.substr(0, 4) + '...' : data;
},
}
]
});
(3)我们可以把某列的 data配置成 null,这样该列的 render函数中就可以使用整行数据:
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id"},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: null,
render: function (data, type, row, meta) {
return type === 'display' && data.birthday.length > 4 ?
'' + data.birthday.substr(0, 4) + '...' :
data.birthday;
},
}
]
});
4、排序、搜索相关的属性
(1)属性介绍:
orderable:是否可排序。默认为 true
orderData:指定当前列进行排序操作的时候,实际用的是哪一列(或几列)的数据进行真正的排序(通常是隐藏的)
searchable:是否允许搜索此列。默认为 true
type:主要用于排序和筛选,指定当前列作为什么类型进行解析。该属性仅 ClientSide有效。
可选值有date,num,num-fmt,html-num,html-num-fmt,html,string
(2)使用样例
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id"},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: "birthday",
orderable: true,
orderData: [0, 1],
searchable: false,
type: "html"
}
]
});
5,单元格创建完后的回调
createdCell为单元格创建完后的回调,可以作为前面介绍的 render的补充。比如下面将小于等于3 的编号设置为红色。
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id",
// cell:TD的dom
// cellData:原始的单元格数据,如何render中进行了格式化,用$(cell).html()来取格式化后的数据
// rowData:行数据
// row:行号
// col:列号
createdCell: function (cell, cellData, rowData, row, col) {
if ( cellData <= 3 ) {
$(cell).css('color', 'red')
}
}
},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: "birthday"}
]
});
二十一、多列同时设置
1,columnDefs 属性介绍
(1)除了上面的 columns,还有个 columnDefs属性可以设置列。只要 columns可以定义的属性,也都可以在这里定义。
(2)与 columns不同的是,columnDefs另外增加了 targets属性用于指定列范围。即一个配置可以同时应用于多列。
(3)优先级方面,上面的 columns高于 columnDefs。
2,使用样例
(1)效果图
下面我们将第一个列和最后一列的内容变成使用 input文本输入框显示。
(2)样例代码
$('#myTable').DataTable({
"ajax": 'data.php',
"columns": [
{ title: '编号', data: "id"},
{ title: '姓名', data: "name"},
{ title: '出生日期', data: "birthday"}
],
"columnDefs": [
{
targets: [0, 2],
render: function (data, type, row, meta) {
if (type === 'display') {
return '';
}
return data;
},
}
],
});