html 属性表格插件,jQuery - 第三方表格插件DataTables使用详解10（列属性的详细设置）...

在之前的样例中，我们都是在 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;

},

}

],

});