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

2018-03-27 发布：hangge 阅读：3170

在之前的样例中，我们都是在 html 页面里的 thead 标签中配置表格列。

<table id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

其实也可以在初始化 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 代码就很简单了：

<table id="myTable">
</table>

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 ?
              '<span title="' + data + '">' + data.substr(0, 4) + '...</span>' : 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 ?
              '<span title="' + data.birthday + '">' + data.birthday.substr(0, 4) + '...</span>' :
               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 '<input type="input" class="form-control" value="' + data + '">';
              }
              return data;
          },
      }
    ],
});