DataTables表格插件 columns的选项配置 显示格式
时间: 2023-12-15 10:05:42 浏览: 96
jQuery表格插件datatables用法详解
可以使用DataTables表格插件中的`columns`选项来配置每一列的显示格式。`columns`选项是一个数组,每个元素表示一列,可以包含多个属性,常用的属性有:
- `data`:指定列的数据源字段名。
- `title`:指定列的标题。
- `render`:指定列的渲染函数,用于对数据进行格式化处理。
- `className`:指定列的CSS类名,用于自定义样式。
- `orderable`:指定列是否允许排序。
- `searchable`:指定列是否允许搜索。
- `visible`:指定列是否可见。
- `width`:指定列的宽度。
例如,下面的示例代码定义了一个包含四列的表格,其中第一列是`id`字段,第二列是`name`字段,第三列是`age`字段,第四列是`email`字段。其中,第四列使用了`render`属性来定义一个渲染函数,将电子邮件地址显示为一个链接:
```javascript
$('#example').DataTable( {
"columns": [
{ "data": "id", "title": "ID", "orderable": true, "searchable": true },
{ "data": "name", "title": "Name", "orderable": true, "searchable": true },
{ "data": "age", "title": "Age", "orderable": true, "searchable": true },
{ "data": "email", "title": "Email", "orderable": false, "searchable": true,
"render": function ( data, type, row ) {
return '<a href="mailto:' + data + '">' + data + '</a>';
}
}
]
} );
```
在这个示例中,除了第四列使用了`render`属性外,其它列都使用了默认的配置,表示允许排序和搜索,使用数据源中对应的字段名作为列标题。如果需要自定义样式,可以使用`className`属性指定CSS类名,然后在CSS样式文件中定义相应的样式。
阅读全文