jquery datatable.js学习笔记




        Ext:extension object,提供额外的表格选项

        Models:类模型容器,These models define the objects that are used to hold the active state and configuration of the table

        oApi: 一些其他人开发的额外函数,Reference to internal functions for use by plug-in developers

        1个静态变量 version,3个静态方法:fnIsDataTable,fnTables,fnVersionCheck。


$(sSelector, oOpts) → {object}

Perform a jQuery selector action on the table's TR elements

_(sSelector, oOpts) → {array}

Almost identical to $ in operation

fnAddData(mData, bRedraw) → {array}     bRedraw是个bool值

Add a single new row or multiple rows of data to the table


This function will make DataTables recalculate(重新计算) the column sizes


Quickly and simply clear a table

fnClose(nTr) → {int}

The exact opposite of 'opening' a row, this function will close any rows which are currently 'open'.

fnDeleteRow(mTarget, fnCallBack, bRedraw) → {array}

Remove a row for the table


Completely remove the table from the DOM


Redraw the table

fnFilter(sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive)

Filter the input based on data

fnGetData(mRow, iCol) → {array|object|string}

Get the data for the whole table, an individual row or an individual cell based on the provided parameters.

fnGetNodes(iRow) → {array|node}

Get an array of the TR nodes that are used in the table's body.

fnGetPosition(nNode) → {int}

Get the array indexes of a particular cell from it's DOM element and column index including hidden columns

fnIsOpen(nTr) → {boolean}

Check to see if a row is 'open' or not.

fnOpen(nTr, mHtml, sClass) → {node}

This function will place a new row directly after a row which is currently on display on the page, with the HTML contents that is passed into the function.

fnPageChange(mAction, bRedraw)

mAction   :string | int                     

Paging action to take: "first", "previous", "next" or "last" or page number to jump to (integer), note that page 0 is the first page.

Change the pagination - provides the internal logic for pagination in a simple API function

fnSetColumnVis(iCol, bShow, bRedraw)

Show a particular column

fnSettings() → {object}

Get the settings for a particular table for external manipulation


Sort the table by a particular column

fnSortListener(nNode, iColumn, fnCallback)

Attach a sort listener to an element for a given column

fnUpdate(mData, mRow, iColumn, bRedraw, bAction) → {int}

Update a table cell or row - this method will accept either a single value to update the cell with, an array of values with one element for each column or an object in the same format as the original data source.

fnVersionCheck(sVersion) → {boolean}

Provide a common method for plug-ins to check the version of DataTables being used, in order to ensure compatibility.



Destroy event, fired when the DataTable is destroyed by calling fnDestroy or passing the bDestroy:true parameter in the initialisation object.


Draw event, fired whenever the table is redrawn on the page, at the same point as fnDrawCallback


Filter event, fired when the filtering applied to the table (using the build in global global filter, or column filters) is altered.


DataTables initialisation complete event, fired when the table is fully drawn, including Ajax data loaded, if Ajax data is required.


Page change event, fired when the paging of the table is altered.


Processing event, fired when DataTables is doing some kind of processing (be it, sort, filter or anything else).


Sort event, fired when the sorting applied to the table is altered


State loaded event, fired when state has been loaded from stored data and the settings object has been modified by the loaded data.


State load event, fired when the table is loading state from the stored data, but prior to the settings object being modified by the saved state - allowing modification of the saved state is required or loading of state for a plug-in


State save event, fired when the table has changed state a new state save is required.


Ajax (XHR) event, fired whenever an Ajax request is completed from a request to made to the server for new data

              接下来在defaults命名空间下包含三个命名空间columns,oLanguage,oSearch,以及58个static properties(静态选项),主要用于初始化      的,给几个重要的看一下。  

aaData :array

An array of data to use for the table, passed in at initialisation which will be used in preference to any data which is already in the DOM(就是给一些初始化数据)

aaSorting :array

You can define which column(s) the sort is performed upon, and the sorting direction, with this variable(初始化时选择排序的对象,如何排序,例如"aaSorting": [[2,'asc'], [3,'desc']]

aLengthMenu :array

This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled.(就是显示每页多少项,例如"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

bJQueryUI :boolean

Enable jQuery UI ThemeRoller support(但是需要加一些文件,目前正在研究中)

bStateSave :boolean

Enable or disable state saving. When enabled a cookie will be used to save table display information such as pagination information, display length, filtering and sorting.(这个功能挺有用的)

fnDrawCallback :function

This function is called on every 'draw' event, and allows you to dynamically modify any aspect you want about the created DOM

fnHeaderCallback :function

This function is called on every 'draw' event, and allows you to dynamically modify the header row.

fnRowCallback :function

This function allows you to 'post process' each row after it have been generated for each table draw, but before it is rendered on screen.

                             在defaults命名空间下的columns命名空间下又有21个static properties(静态选项),选几个重要的看一下:

aDataSort :array

Allows a column's sorting to take multiple columns into account when doing a sort.(多项配合排序时有用)

asSorting :array

You can control the default sorting direction, and even alter the behaviour of the sort handler

bSearchable :boolean,bSortable :boolean,

bVisible :boolean


mData :string|int|function|null

This property can be used to read data from any JSON data source property, including deeply nested objects / properties.

mRender :string|int|function|null


sClass :string,sName :string,sTitle :string,sWidth :string



              在models命名空间下又有5个namespace,分别是ext,oColumn,oRow,oSearch,oSettings。如果有人也在看datatable的doc的话,                 我非常希望有人能具体的跟我说说这个models命名空间有什么作用,我只是有一个模糊的概念。

            在oApi命名空间下(Reference to internal functions for use by plug-in developers)是为了方便进行二次开发用的,有85个static methods,涵盖了defaults命名空间里所有的函数






"sScrollY": 200px,
"bPaginate": true,
"scrollCollapse": true,


"bScrollCollapse": true,

文章标签: jquery
想对作者说点什么? 我来说一句


2012年02月15日 139KB 下载

jquery 插件DataTable 最新版本下载

2015年08月04日 1.52MB 下载


2011年01月16日 316KB 下载

jQuery 语法学习笔记

2011年09月12日 18KB 下载



jquery datatable.js学习笔记