oTable.$('tr').click( function () {? var data = oTable.fnGetData( this );? // ... do something with the array / object of data for the row? } );? } );?
二：?列屬性 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:
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.
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
// Read table data from objects
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "sAjaxSource": "sources/deep.txt",
? ? "aoColumns": [
? ?? ?{ "mData": "engine" },
? ?? ?{ "mData": "browser" },
? ?? ?{ "mData": "platform.inner" },
? ?? ?{ "mData": "platform.details.0" },
? ?? ?{ "mData": "platform.details.1" }
? ? ]
??} );
} );
// Using mData as a function to provide different information for
// sorting, filtering and display. In this case, currency (price)
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [ 0 ],
? ?? ?"mData": function ( source, type, val ) {
? ?? ???if (type === 'set') {
? ?? ?? ? source.price = val;
? ?? ?? ? // Store the computed dislay and filter values for efficiency
? ?? ???// 'sort', 'type' and undefined all just use the integer
? ?? ???return source.price;
? ?? ?}
? ? } ]
??} );
} );
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
// Create a comma separated list from an array of objects
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "sAjaxSource": "sources/deep.txt",
? ? "aoColumns": [
? ?? ?{ "mData": "engine" },
? ?? ?{ "mData": "browser" },
? ?? ?{
? ?? ???"mData": "platform",
? ?? ???"mRender": "[, ].name"
? ?? ?}
? ? ]
??} );
} );
// Use as a function to create a link from the data source
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [ 0 ],
? ?? ?"mData": "download_link",
? ?? ?"mRender": function ( data, type, full ) {
? ?? ???return '<a href="'+data+'">Download</a>';
? ?? ?}
? ? } ]
??} );
} );
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
// Make the first column use TH cells
$(document).ready( function() {
??var oTable = $('#example').dataTable( {
? ? "aoColumnDefs": [ {
? ?? ?"aTargets": [ 0 ],
? ?? ?"sCellType": "th"
? ? } ]
??} );
} );
sClass：給列加上自己定義的屬性
Default:
Empty string
Type:
string
// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sClass": "my_class", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sClass": "my_class" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );
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
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?{
? ?? ???"sContentPadding": "mmm"
? ?? ?}
? ? ]
??} );
} );
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
// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{
? ?? ???"mData": null,
? ?? ???"sDefaultContent": "Edit",
? ?? ???"aTargets": [ -1 ]
? ?? ?}
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?{
? ?? ???"mData": null,
? ?? ???"sDefaultContent": "Edit"
? ?? ?}
? ? ]
??} );
} );
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
// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sName": "engine", "aTargets": [ 0 ] },
? ?? ?{ "sName": "browser", "aTargets": [ 1 ] },
? ?? ?{ "sName": "platform", "aTargets": [ 2 ] },
? ?? ?{ "sName": "version", "aTargets": [ 3 ] },
? ?? ?{ "sName": "grade", "aTargets": [ 4 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sName": "engine" },
? ?? ?{ "sName": "browser" },
? ?? ?{ "sName": "platform" },
? ?? ?{ "sName": "version" },
? ?? ?{ "sName": "grade" }
? ? ]
??} );
} );
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.
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
// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sType": "html", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sType": "html" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );
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
// Using aoColumnDefs
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumnDefs": [
? ?? ?{ "sWidth": "20%", "aTargets": [ 0 ] }
? ? ]
??} );
} );
// Using aoColumns
$(document).ready( function() {
??$('#example').dataTable( {
? ? "aoColumns": [
? ?? ?{ "sWidth": "20%" },
? ?? ?null,
? ?? ?null,
? ?? ?null,
? ?? ?null
? ? ]
??} );
} );
三：回調 fnCookieCallback：還沒有使用過
$(document).ready( function () {$('#example').dataTable( {"fnCookieCallback": function (sName, oData, sExpires, sPath) {// Customise oData or sName or whatever else herereturn sName + "="+JSON.stringify(oData)+"; expires=" + sExpires +"; path=" + sPath;}} );
} );fnCreatedRow：顧名思義，創建行得時候的回調函數
$(document).ready( function() {$('#example').dataTable( {"fnCreatedRow": function( nRow, aData, iDataIndex ) {// 為a的話字體加粗if ( aData[4] == "A" ){$('td:eq(4)', nRow).html( '<b>A</b>' );}}} );
} );fnDrawCallback：draw畫 ，這個應該是重繪的回調函數
$(document).ready( function() {$('#example').dataTable( {"fnDrawCallback": function( oSettings ) {alert( 'DataTables 重繪了' );}} );
} );fnFooterCallback：底部的回調函數，這個可以用來做總計之類的功能
$(document).ready( function() {$('#example').dataTable( {"fnFooterCallback": function( nFoot, aData, iStart, iEnd, aiDisplay ) {nFoot.getElementsByTagName('th')[0].innerHTML = "Starting index is "+iStart;}} );
} )fnFormatNumber：顧名思義，格式化數字的顯示方式
$(document).ready( function() {$('#example').dataTable( {"fnFormatNumber": function ( iIn ) {if ( iIn < 1000 ) {return iIn;} else {vars=(iIn+""),a=s.split(""), out="",iLen=s.length;for ( var i=0 ; i<iLen ; i++ ) {if ( i%3 === 0 && i !== 0 ) {out = "'"+out;}out = a[iLen-i-1]+out;}}return out;};} );
} );fnHeaderCallback：表頭的回調函數
$(document).ready( function() {$('#example').dataTable( {"fnHeaderCallback": function( nHead, aData, iStart, iEnd, aiDisplay ) {nHead.getElementsByTagName('th')[0].innerHTML = "Displaying "+(iEnd-iStart)+" records";}} );
} )fnInfoCallback：datatables信息的回調函數
$('#example').dataTable( {"fnInfoCallback": function( oSettings, iStart, iEnd, iMax, iTotal, sPre ) {return iStart +" to "+ iEnd;}
} );fnInitComplete：datatables初始化完畢后會調用這個方法
$(document).ready( function() {$('#example').dataTable( {"fnInitComplete": function(oSettings, json) {alert( 'DataTables has finished its initialisation.' );}} );
} )fnPreDrawCallback：每一次繪datatables時候調用的方法
$(document).ready( function() {$('#example').dataTable( {"fnPreDrawCallback": function( oSettings ) {if ( $('#test').val() == 1 ) {return false;}}} );
} );fnRowCallback：行的回調函數
$(document).ready( function() {$('#example').dataTable( {"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {// Bold the grade for all 'A' grade browsersif ( aData[4] == "A" ){$('td:eq(4)', nRow).html( '<b>A</b>' );}}} );
} );fnServerData：這個是結合服務器模式的回調函數，用來處理服務器返回過來的數據
// POST data to server
$(document).ready( function() {$('#example').dataTable( {"bProcessing": true,"bServerSide": true,"sAjaxSource": "xhr.php","fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {oSettings.jqXHR = $.ajax( {"dataType": 'json',"type": "POST","url": sSource,"data": aoData,"success": fnCallback} );}} );
} );fnServerParams：向服務器傳額外的參數
$(document).ready( function() {$('#example').dataTable( {"bProcessing": true,"bServerSide": true,"sAjaxSource": "scripts/server_processing.php","fnServerParams": function ( aoData ) {aoData.push( { "name": "more_data", "value": "my_value" } );}} );
} );fnStateLoad：讀取狀態的回調函數
$(document).ready( function() {$('#example').dataTable( {"bStateSave": true,"fnStateLoad": function (oSettings) {var o;// Send an Ajax request to the server to get the data. Note that// this is a synchronous request.$.ajax( {"url": "/state_load","async": false,"dataType": "json","success": function (json) {o = json;}} );return o;}} );
} );fnStateLoadParams：和上面的不知道什么區別，沒用過
// Remove a saved filter, so filtering is never loaded
$(document).ready( function() {$('#example').dataTable( {"bStateSave": true,"fnStateLoadParams": function (oSettings, oData) {oData.oSearch.sSearch = "";}} );
} );
// Disallow state loading by returning false
$(document).ready( function() {$('#example').dataTable( {"bStateSave": true,"fnStateLoadParams": function (oSettings, oData) {return false;}} );
} );fnStateLoaded：又是這個，加了ed 不知道意思沒用過
// Show an alert with the filtering value that was saved
$(document).ready( function() {$('#example').dataTable( {"bStateSave": true,"fnStateLoaded": function (oSettings, oData) {alert( 'Saved filter was: '+oData.oSearch.sSearch );}} );
} );fnStateSave：狀態儲存
$(document).ready( function() {$('#example').dataTable( {"bStateSave": true,"fnStateSave": function (oSettings, oData) {// Send an Ajax request to the server with the state object$.ajax( {"url": "/state_save","data": oData,"dataType": "json","method": "POST""success": function () {}} );}} );
} );fnStateSaveParams ：狀態儲存參數，沒用過，不明白
// Remove a saved filter, so filtering is never saved
$(document).ready( function() {$('#example').dataTable( {"bStateSave": true,"fnStateSaveParams": function (oSettings, oData) {oData.oSearch.sSearch = "";}} );
} );
