jquery datatables api（2）

二： 列属性

aoColumnDefs: This array allows you to target a specific column, multiple columns, or all columns, using the aTargets property of each object in the array (please note that aoColumnDefs was introduced in DataTables 1.7). This allows great flexibility when creating tables, as the aoColumnDefs arrays can be of any length, targeting the columns you specifically want. The aTargets property is an array to target one of many columns and each element in it can be:

aoColumnDefs:这个数组允许您针对一个特定列,多个列,或者所有列,使用aTargets属性的数组中的每个对象(请注意,介绍了 aoColumnDefs datatable 1.7)。这提供了很大的灵活性在创建表,因为aoColumnDefs数组可以是任意长度,目标是你特别想要的列。aTargets的属性是一个数组来 目标众多列和每个元素在它可以:

• a string - class name will be matched on the TH for the column
• 0 or a positive integer - column index counting from the left
• a negative integer - column index counting from the right
• the string "_all" - all columns (i.e. assign a default)

aoColumns: If specified, then the length of this array must be equal to the number of columns in the original HTML table. Use 'null' where you wish to use only the default values and automatically detected options.

aoColumnDefs参数和aoColumns可以一起使用,尽管aoColumnDefs优先aoColumns的灵活性。 如果两者都使用,aoColumns定义将最高优先级。同样,如果相同的列的目标是在aoColumnDefs多次,第一个元素的数组将最高优先级,最后 一个最低的。


aDataSort：定义一个列或多个列自定义排序

Default:	null Takes the value of the column index automatically
Type:	array

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "aDataSort": [ 0, 1 ], "aTargets": [ 0 ] },
6.       { "aDataSort": [ 1, 0 ], "aTargets": [ 1 ] },
7.       { "aDataSort": [ 2, 3, 4 ], "aTargets": [ 2 ] }
8.     ]
9.   } );
10. } );
11. // Using aoColumns
12. $(document).ready( function() {
13.   $('#example').dataTable( {
14.     "aoColumns": [
15.       { "aDataSort": [ 0, 1 ] },
16.       { "aDataSort": [ 1, 0 ] },
17.       { "aDataSort": [ 2, 3, 4 ] },
18.       null,
19.       null
20.     ]
21.   } );
22. } );

复制代码

asSorting：控制列的升序或降序到自定义列

Default:	[ 'asc', 'desc' ]
Type:	array

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "asSorting": [ "asc" ], "aTargets": [ 1 ] },
6.       { "asSorting": [ "desc", "asc", "asc" ], "aTargets": [ 2 ] },
7.       { "asSorting": [ "desc" ], "aTargets": [ 3 ] }
8.     ]
9.   } );
10. } );
11. // Using aoColumns
12. $(document).ready( function() {
13.   $('#example').dataTable( {
14.     "aoColumns": [
15.       null,
16.       { "asSorting": [ "asc" ] },
17.       { "asSorting": [ "desc", "asc", "asc" ] },
18.       { "asSorting": [ "desc" ] },
19.       null
20.     ]
21.   } );
22. } );

复制代码
bSearchable：设置列是否能被快速检索框搜索到

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "bSearchable": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $('#example').dataTable( {
11.     "aoColumns": [
12.       { "bSearchable": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

复制代码

bSortable：启用或禁用列排序。

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "bSortable": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $('#example').dataTable( {
11.     "aoColumns": [
12.       { "bSortable": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

复制代码

bUseRendered ：高版本已经废弃这个属性，没有使用过，直接翻译吧！当使用fnRender()为一个 列,您可能希望使用原始的数据(在呈现之前)进行排序和过滤(默认是用于呈现的数据,用户可以看到)。这可能是有用的日期等。请注意,该选项已被弃用,将 被删除的下一个版本的datatable。请用mRender / mData而不是fnRender。

Default:	true
Type:	boolean

无例子代码；
bVisible：启用或禁用本列显示。

Default:	true
Type:	boolean

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "bVisible": false, "aTargets": [ 0 ] }
6.     ] } );
7. } );
8. // Using aoColumns
9. $(document).ready( function() {
10.   $('#example').dataTable( {
11.     "aoColumns": [
12.       { "bVisible": false },
13.       null,
14.       null,
15.       null,
16.       null
17.     ] } );
18. } );

复制代码

fnCreatedCell：开发人员可定义的函数,就会调用一个细胞被创建(Ajax源等)或处理输入(DOM源)。这可以作为一种恭维,mRender允许您修改DOM元素(例如添加背景颜色)当元素是可用的。

Default:
Type:	function

1. $(document).ready( function() {
2.   $('#example').dataTable( {
3.     "aoColumnDefs": [ {
4.       "aTargets": [3],
5.       "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
6.         if ( sData == "1.7" ) {
7.           $(nTd).css('color', 'blue')
8.         }
9.       }
10.     } ]
11.   });
12. } );

复制代码

fnRender：高版本已经废弃这个属性。mRender这个代替

iDataSort：列索引(从0开始!),你想要执行一个在本专栏时被选中进行排序。这可以用于排序在隐藏列例如。这个也没使用过

Default:	-1 Use automatically calculated column index
Type:	int

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "iDataSort": 1, "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "iDataSort": 1 },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

复制代码

mData：这个属性可以用来读取JSON数据从任何数据源属性,包括深层嵌套对象/属性。可以给mData在许多不同的方面影响其行为:

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source.
• null - the sDefaultContent option will be used for the cell (null by default, so you will need to specify the default content you want - typically an empty string). This can be useful on generated columns such as edit / delete action columns.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  
  • {array|object} The data source for the row
  • {string} The type call data requested - this will be 'set' when setting data or 'filter', 'display', 'type', 'sort' or undefined when gathering data. Note that when undefined is given for the type DataTables expects to get the raw data for the object back
  • {*} Data to set when the second parameter is 'set'.
  The return value from the function is not required when 'set' is the type of call, but otherwise the return is what will be used for the data requested.

Default:	null Use automatically calculated column index
Type:	string

1. // Read table data from objects
2. $(document).ready( function() {
3.   var oTable = $('#example').dataTable( {
4.     "sAjaxSource": "sources/deep.txt",
5.     "aoColumns": [
6.       { "mData": "engine" },
7.       { "mData": "browser" },
8.       { "mData": "platform.inner" },
9.       { "mData": "platform.details.0" },
10.       { "mData": "platform.details.1" }
11.     ]
12.   } );
13. } );
14. // Using mData as a function to provide different information for
15. // sorting, filtering and display. In this case, currency (price)
16. $(document).ready( function() {
17.   var oTable = $('#example').dataTable( {
18.     "aoColumnDefs": [ {
19.       "aTargets": [ 0 ],
20.       "mData": function ( source, type, val ) {
21.         if (type === 'set') {
22.           source.price = val;
23.           // Store the computed dislay and filter values for efficiency
24.           source.price_display = val=="" ? "" : "[        DISCUZ_CODE_7        ]quot;+numberFormat(val);
25.           source.price_filter  = val=="" ? "" : "[        DISCUZ_CODE_7        ]quot;+numberFormat(val)+" "+val;
26.           return;
27.         }
28.         else if (type === 'display') {
29.           return source.price_display;
30.         }
31.         else if (type === 'filter') {
32.           return source.price_filter;
33.         }
34.         // 'sort', 'type' and undefined all just use the integer
35.         return source.price;
36.       }
37.     } ]
38.   } );
39. } );

复制代码

mRender ：This property is the rendering partner to mData and it is suggested that when you want to manipulate data for display (including filtering, sorting etc) but not altering the underlying data for the table, use this property. mData can actually do everything this property can and more, but this parameter is easier to use since there is no 'set' option. Like mData is can be given in a number of different ways to effect its behaviour, with the addition of supporting array syntax for easy outputting of arrays (including arrays of objects):

• integer - treated as an array index for the data source. This is the default that DataTables uses (incrementally increased for each column).
• string - read an object property from the data source. Note that you can use Javascript dotted notation to read deep properties / arrays from the data source and also array brackets to indicate that the data reader should loop over the data source array. When characters are given between the array brackets, these characters are used to join the data source array together. For example: "accounts[, ].name" would result in a comma separated list with the 'name' value from the 'accounts' array of objects.
• function - the function given will be executed whenever DataTables needs to set or get the data for a cell in the column. The function takes three parameters:
  
  • {array|object} The data source for the row (based on mData)
  • {string} The type call data requested - this will be 'filter', 'display', 'type' or 'sort'.
  • {array|object} The full data source for the row (not based on mData)
  The return value from the function is what will be used for the data requested.

Default:	null Use mData
Type:	string

1. // Create a comma separated list from an array of objects
2. $(document).ready( function() {
3.   var oTable = $('#example').dataTable( {
4.     "sAjaxSource": "sources/deep.txt",
5.     "aoColumns": [
6.       { "mData": "engine" },
7.       { "mData": "browser" },
8.       {
9.         "mData": "platform",
10.         "mRender": "[, ].name"
11.       }
12.     ]
13.   } );
14. } );
15. // Use as a function to create a link from the data source
16. $(document).ready( function() {
17.   var oTable = $('#example').dataTable( {
18.     "aoColumnDefs": [ {
19.       "aTargets": [ 0 ],
20.       "mData": "download_link",
21.       "mRender": function ( data, type, full ) {
22.         return 'Download';
23.       }
24.     } ]
25.   } );
26. } );

复制代码

sCellType：Change the cell type created for the column - either TD cells or TH cells. This can be useful as TH cells have semantic meaning in the table body, allowing them to act as a header for a row (you may wish to add scope='row' to the TH elements).

Default:	td
Type:	string

1. // Make the first column use TH cells
2. $(document).ready( function() {
3.   var oTable = $('#example').dataTable( {
4.     "aoColumnDefs": [ {
5.       "aTargets": [ 0 ],
6.       "sCellType": "th"
7.     } ]
8.   } );
9. } );

复制代码

sClass：给列加上自己定义的属性

Default:	Empty string
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sClass": "my_class", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sClass": "my_class" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

复制代码

sContentPadding ：When DataTables calculates the column widths to assign to each column, it finds the longest string in each column and then constructs a temporary table and reads the widths from that. The problem with this is that "mmm" is much wider then "iiii", but the latter is a longer string - thus the calculation can go wrong (doing it properly and putting it into an DOM object and measuring that is horribly(!) slow). Thus as a "work around" we provide this option. It will append its value to the text that is found to be the longest string for the column - i.e. padding. Generally you shouldn't need this, and it is not documented on the general DataTables.net documentation

Default:	Empty string
Type:	string

1. // Using aoColumns
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumns": [
5.       null,
6.       null,
7.       null,
8.       {
9.         "sContentPadding": "mmm"
10.       }
11.     ]
12.   } );
13. } );

复制代码

sDefaultContent ：Allows a default value to be given for a column's data, and will be used whenever a null data source is encountered (this can be because mData is set to null, or because the data source itself is null).

Default:	null
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       {
6.         "mData": null,
7.         "sDefaultContent": "Edit",
8.         "aTargets": [ -1 ]
9.       }
10.     ]
11.   } );
12. } );
13. // Using aoColumns
14. $(document).ready( function() {
15.   $('#example').dataTable( {
16.     "aoColumns": [
17.       null,
18.       null,
19.       null,
20.       {
21.         "mData": null,
22.         "sDefaultContent": "Edit"
23.       }
24.     ]
25.   } );
26. } );

复制代码

sName：This parameter is only used in DataTables' server-side processing. It can be exceptionally useful to know what columns are being displayed on the client side, and to map these to database fields. When defined, the names also allow DataTables to reorder information from the server if it comes back in an unexpected order (i.e. if you switch your columns around on the client-side, your server-side code does not also need updating).

Default:	Empty string
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sName": "engine", "aTargets": [ 0 ] },
6.       { "sName": "browser", "aTargets": [ 1 ] },
7.       { "sName": "platform", "aTargets": [ 2 ] },
8.       { "sName": "version", "aTargets": [ 3 ] },
9.       { "sName": "grade", "aTargets": [ 4 ] }
10.     ]
11.   } );
12. } );
13. // Using aoColumns
14. $(document).ready( function() {
15.   $('#example').dataTable( {
16.     "aoColumns": [
17.       { "sName": "engine" },
18.       { "sName": "browser" },
19.       { "sName": "platform" },
20.       { "sName": "version" },
21.       { "sName": "grade" }
22.     ]
23.   } );
24. } );

复制代码

sSortDataType ：Defines a data source type for the sorting which can be used to read real-time information from the table (updating the internally cached version) prior to sorting. This allows sorting to occur on user editable elements such as form inputs.

Default:	std
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sSortDataType": "dom-text", "aTargets": [ 2, 3 ] },
6.       { "sType": "numeric", "aTargets": [ 3 ] },
7.       { "sSortDataType": "dom-select", "aTargets": [ 4 ] },
8.       { "sSortDataType": "dom-checkbox", "aTargets": [ 5 ] }
9.     ]
10.   } );
11. } );
12. // Using aoColumns
13. $(document).ready( function() {
14.   $('#example').dataTable( {
15.     "aoColumns": [
16.       null,
17.       null,
18.       { "sSortDataType": "dom-text" },
19.       { "sSortDataType": "dom-text", "sType": "numeric" },
20.       { "sSortDataType": "dom-select" },
21.       { "sSortDataType": "dom-checkbox" }
22.     ]
23.   } );
24. } );

复制代码

sTitle ：The title of this column.

Default:	null Derived from the 'TH' value for this column in the original HTML table.
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sTitle": "My column title", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sTitle": "My column title" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

复制代码

sType：The type allows you to specify how the data for this column will be sorted. Four types (string, numeric, date and html (which will strip HTML tags before sorting)) are currently available. Note that only date formats understood by Javascript's Date() object will be accepted as type date. For example: "Mar 26, 2008 5:03 PM". May take the values: 'string', 'numeric', 'date' or 'html' (by default). Further types can be adding through plug-ins.

Default:	null Auto-detected from raw data
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sType": "html", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sType": "html" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

复制代码

sWidth：Defining the width of the column, this parameter may take any CSS value (3em, 20px etc). DataTables applies 'smart' widths to columns which have not been given a specific width through this interface ensuring that the table remains readable.

Default:	null Automatic
Type:	string

1. // Using aoColumnDefs
2. $(document).ready( function() {
3.   $('#example').dataTable( {
4.     "aoColumnDefs": [
5.       { "sWidth": "20%", "aTargets": [ 0 ] }
6.     ]
7.   } );
8. } );
9. // Using aoColumns
10. $(document).ready( function() {
11.   $('#example').dataTable( {
12.     "aoColumns": [
13.       { "sWidth": "20%" },
14.       null,
15.       null,
16.       null,
17.       null
18.     ]
19.   } );
20. } );

 
最后注明：本文转自http://blog.csdn.net/lisky119/article/details/25884197