DataTables分析一

本篇博客分析column()及相关函数。

column()

描述：
从DataTable中选择单一的列通过链式方式来操作该列，比如切换它的可视性或者获得该列的数据。注意只是选择单一的列。如果该选择器提供解析多列的方式，结果会被截取成单一的列-所发现的第一个。如果你需要对多列采取操作，可以使用与此相同的参数来使用columns()函数。
使用方式：

function column( columnSelector[,modifier])

columnSelector:

DataTables的columns()和column() (也有选择性的cells()和cell())函数提供方法从表格中选择列。所被选择的列和选择器如何实际操作是由该属性数据类型所控制。
选项：
列选择器能被给予大量不同的表格，来使其应用你的数据更简单并使用如下方式：

• No selector 选择所有列
• integer 列的索引选择器
• {integer}:visIdx 可视列的索引选择器
• {integer}:visible 同上
• {string}:name 列名选择器，由columns.name产生
• string jQuery选择器
• node 下列中的一种
  
  • th / td 列头cell
  • td / td 列body的cell
  • 任何元素有一个data-da-colume属性指向自己，或者父元素。能够通过使用FixedColumns和Responsive来允许使用简单的列选择
• function 函数选择器
• jQuery 列头节点的jQuery对象

• array 数组包含以上选项的综合体

   介绍其中*columns.name*
   描述：
   当使用DataTables的API时，想要去定位到单一的列来操作它（比如你希望求一列数据的和）是非常普遍的。
   DataTables有两个基础的方法去定位列：
   - 使用列的索引（当表格初始完成时被自动设置）
   - 使用一个名字 - 通过这个参数来指定
  这个参数能让在API中操作列非常容易 - 例如你能够使用table.colume('location:name').data()从名叫location的列中获取数据 
  - 增加一个字符串:name来告诉DataTables应该通过一个列表名进行选择操作。 
  Examples
  通过columnDefs设置列名
  ```
  $('#example').dataTable( {
    "columnDefs": [
      { "name": "engine",   "targets": 0 },
      { "name": "browser",  "targets": 1 },
      { "name": "platform", "targets": 2 },
      { "name": "version",  "targets": 3 },
      { "name": "grade",    "targets": 4 }
    ]
  } );
  ```
  通过columns设置列名
  $('#example').dataTable( {
    "columns": [
      { "name": "engine" },
      { "name": "browser" },
      { "name": "platform" },
      { "name": "version" },
      { "name": "grade" }
    ]
  } );
  

下面讨论selector参数的几种情形

1.无selector

例如

```
var table = $('#example').DataTable();
var allData = table.columns().data();
```

会选择列表中的所有列并获取数据。

2.整数
DataTables会存储每一列的索引值，并且不同于可视列索引值，它是固定不变的。
例如

var table = $('#example').DataTable();
var data = table.column( 0 ).data();

会选择索引为0的列的数据。
3.整数：visIdx 同 ：visible
这是一种针对存在隐藏列来获取列索引方法的改良。
例如

var table = $('#example').DataTable( {
    columnDefs: [
        { visible: false, targets: 1 }
    ]
} );

$('#example tbody').on( 'click', 'td', function () {
    var columnData = table
        .column( $(this).index()+':visIdx' )
        .data();
} );

会获取到被点击列的数据。
4.字符串：name
注意给列命名不需要每一列都是独一无二的，通过：name选择器可以匹配到名字相同的多列。
例如

var table = $('#example').DataTable( {
    columns: [
        { name: 'first-name' },
        { name: 'last-name' },
        { name: 'position' },
        { name: 'salary' },
        { name: 'salary' }
    ]
} );

// Get salary column data
table.column( 'salary:name' ).data();

会获取列名为salary的两列数据。
5.字符串
当选择器是字符串时，它会表现成jQuery选择器来操作表格列头的th和td元素。
每一列会有一个单元格被用作列表头，如果每一列的列头中含有超过一个单元格，查看orderCellsTop来了解DataTables怎么选择单元格来作为列表头。

orderCellsTop
控制将命令事件处理程序应用于列中的哪个单元格。
允许控制是否DataTables应该使用顶部（属性为true时）在单一列所找到的独一无二单元格，或者底部(属性为false时 默认值)来绑定默认命令监听器。这在使用复杂的列头时是非常有用的。
例如：
<thead>
    <tr>
        <td rowspan="2">1</td>
        <td>2.1</td>
    </tr>
    <tr>
        <td>2.2</td>
    </tr>
</thead>
在这种情况下，当orderCellsTop为默认值false时，单元格1与2.2会有命令监听器绑定在其上；如果orderCellsTop的值为true时，则会绑定到单元格1与2.1上。

注意它就像jQuery选择器，当selector是字符串时，是可以通过逗号来分割多种选择器。
例如

通过ID选择一列
var table = $('#example').DataTable();
var column = table.column('#column-3');
通过类名选择多列
var table = $('#example').DataTable();
var columns = table.columns('.priority');
通过包含内容
var table = $('#example').DataTable();
var column = table.column(':contains(Salary)');

6.节点
th和td Dom元素能被当作selector来从DataTabels API中选择一列。
例如

从被点击后的元素选择一列
var table = $('#example').DataTable();

$('#example thead').on( 'click', 'th', function () {
  var columnData = table.column( this ).data();
  // ... do something with `columnData`
} );

7.Function
为了完全控制被选择的列。可以通过自定义逻辑的函数来进行选择。这个逻辑简单或复杂取决于使用者，如果列应该被包含在选择的结果中可以通过简单的返回true来选择，或者返回false不包含它。
函数接受三个参数。
1.Column index
参考column().index()
2.Column data
参考column().data()
3.Column node
参考column().header()，column().nodes()
例如

获取包含字符串'Active'列的数据
var table = $('#example').DataTable();

var active = table
    .columns( function ( idx, data, node ) {
        return $.inArray( 'Active', data ) !== -1 ?
            true : false;
    } )
    .data();

8.jQuery
与上述的node类型（因为jQuery对象是DOM节点的类数组列表）非常相似，一个jQuery实例能被当作一个列选择器，任何节点都是由jQuery匹配到的表头单元格。
请注意jQuery选择器不能选择被隐藏的列（因为隐藏的列已经被DataTables移除了文档），为了克服这种情形，可以使用上述的string参数。
例如：

从一个jQuery实例中选择列并获取数据
var columns = $('#example thead th.immediate');
var table = $('#example').DataTable();

var columnData = table.columns( columns ).data();

9.数组
上述任意操作的能被结合成一个选择器，提供一种方法去选择多列，或者混合选择器类型，通过简单提供选择器选项一个你想要包含的数组。
例如：

通过列索引获取两列
var table = $('#example').DataTable();
var data = table.columns( [0, 1] ).data();
混合column-selector类型 -索引和类选择器
var table = $('#example').DataTable();
var data = table.columns( [0, '.important'] ).data();

下面来说明column函数第二个参数

selector-modifier

对于行，列和单元格选择器该怎么操作行的参数。（可选参数）
参数:
基础地，selector-modifier是一个由三个内置属性组成的对象，并且能被例如Select等扩展插件所扩展。这些属性包含下列这些默认值：

{
    // DataTables core
    order:  'current',  // 'current', 'applied', 'index',  'original'
    page:   'all',      // 'all',     'current'
    search: 'none',     // 'none',    'applied', 'removed'

    // Extension - KeyTable (v2.1+) - cells only
    focused: undefined, // true, false, undefined

    // Extension - Select (v1.0+)
    selected: undefined // true, false, undefined
}

内置对象
order
order调节项提供控制行处理的顺序的能力。这能对链式函数返回的结果造成一定影响 - 例如 column.data()会按照目前列在表格中的顺序返回数据，或者依照原始的数据顺序。

• current（默认值） 依照当前应用于表中的顺序处理行
• index 依照数据索引顺序处理行（数据最初置入表的顺序）
• applied 同current
• original 同index并向后兼容
  例如：

var table = $('#myTable').DataTable();
table.column( 3, {order:'current'} ).data();
因为默认值为current等同于
table.column( 3 ).data();

page
page调节项允许你控制是否选择器应该考虑表格中的全部数据，或者不顾分页仅仅使用目前所展示的页面中的行。

• all（默认值） 使用所有页面的行
• current 仅仅使用展示页面的行
  例如：

仅仅获取当前页面的行数据
var table = $('#myTable').DataTable();
table.rows( {page:'current'} ).data();

search
search调节项提供方法去控制应用到表格中由选择器所使用的哪一行来使用查询选项。
- none（默认值） 不计入查询（所有行都使用）
- applied 仅仅使用当前表格总符合查询的行
- removed 仅仅使用通过搜索所从表格中移除的行
例如：

以index顺序获取符合应用到表格中符合搜索词行中的tr元素：
var table = $('#myTable').DataTable();
table.rows( {order:'index', search:'applied'} ).nodes();

获取由搜索导致移除的元素
var table = $('#myTable').DataTable();
table.rows( {search:'removed'} ).nodes();

Extensions

下列选项描述的行为可以被添加到DataTables 的核心通过其扩展使用。这些扩展提供紧密集成的DataTables 的API，这些选项可以与扩展工作感受DataTables自然的一部分。

focused（cells only）
keyTable提供方法聚焦一个DataTable上的特定单元格，并且因此能够知道哪一个单元格被聚焦和哪些没有被聚焦。
注意这个选项只能结合cells()和cell()方法使用。对行与列选择器使用将会是无效的。

• undefined（默认值） 未进行选择修饰
• true 仅仅聚焦的单元格能被选择
• false 仅仅未被聚焦的单元格会被选择
  例如：

获取聚焦单元格的数据
var table = $('#myTable').DataTable();
table.cell( {focused:true} ).data();

selected
Select extension为DataTables提供了选择表格中条目的方法（行，列和单元格），并且它关键的是能够检索用户选择的条目因此你能够对它们采取一定操作。
- undefined（默认值） 未进行选择修饰
- true 仅仅被选择的条目会被检索
- false 仅仅未被选择的条目会被检索

获取选中行的数据
var table = $('#myTable').DataTable();
table.rows( {selected:true} ).data();