如果有人用過jquery，而且用jquery去寫一些有關於數據表格的前台頁面，那么想必應該用過datatable這款控件，當然還有一款dataGridview的控件，也挺不錯的，我是因為幫老師做一個項目，所以涉及到這個控件，當時就感覺挺強大的，我們用到了只是其中很少一部分功能，當初為了趕進度，也沒有深入的去研究一下，那現在趁着剛開學課程很少，就花了點時間好好的研究了一些，接下來我應該會寫幾篇有關於datatable的學習筆記。
因為國內資料很少，我也是下了官網的包，目前最新的DataTables-1.9.4，然后自己慢慢啃，都是英文，看得挺頭疼的，我總結的也只是我認為重要的東西，最好的學習方法還是自己去DataTables-1.9.4\docs下看，如果有人也對這款控件有所研究，歡迎分享，如果我有地方說的不對也希望大家積極指正，反正就是一句話，大家一起學習進步。
因為我是一邊研究一邊把一些重要的東西寫在word上的，然后匯總分幾篇發表的，所以格式什么的沒太注意，可能大家會看得有點累，那進入正題：
DataTable下有四個命名空間（namespace），分別是defaults，ext,models,oApi。
Defaults：主要是用於初始化表格的一些選項。
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。
22個方法：
| $(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 |
| fnAdjustColumnSizing(bRedraw) |
This function will make DataTables recalculate（重新計算） the column sizes |
| fnClearTable(bRedraw) |
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 |
| fnDestroy(bRemove) |
Completely remove the table from the DOM |
| fnDraw(bComplete) |
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 |
| fnSort(iCol) |
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. |
11個事件：
| destroy |
Destroy event, fired when the DataTable is destroyed by calling fnDestroy or passing the bDestroy:true parameter in the initialisation object. |
| draw |
Draw event, fired whenever the table is redrawn on the page, at the same point as fnDrawCallback |
| filter |
Filter event, fired when the filtering applied to the table (using the build in global global filter, or column filters) is altered. |
| init |
DataTables initialisation complete event, fired when the table is fully drawn, including Ajax data loaded, if Ajax data is required. |
| page |
Page change event, fired when the paging of the table is altered. |
| processing |
Processing event, fired when DataTables is doing some kind of processing (be it, sort, filter or anything else). |
| sort |
Sort event, fired when the sorting applied to the table is altered |
| stateLoaded |
State loaded event, fired when state has been loaded from stored data and the settings object has been modified by the loaded data. |
| stateLoadParams |
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 |
| stateSaveParams |
State save event, fired when the table has changed state a new state save is required. |
| xhr |
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（初始化時選擇排序的對象，如何排序，例如 |
| aLengthMenu :array |
This parameter allows you to readily specify the entries in the length drop down menu that DataTables shows when pagination is enabled.（就是顯示每頁多少項，例如 |
| 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 |
和上面一個差不多，我覺得都是非常重要的函數，如果我要在表格中插入一些標簽的，比如input，a，button等，就會用到，而且挺方便的。 |
| sClass :string，sName :string，sTitle :string，sWidth :string |
基礎的東西，sClass為每個td設置一個class，sName：只能在dataTable服務端使用，sTitle就是表格header，swidth：調節每個td寬度 |
在defaults命名空間下的oLanguage，oSearch命名空間下的變量，命名空間就不說了。
在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命名空間里所有的函數。
ext命名空間由models命名空間下的ext繼承了，所以所有內容都在models/ext下。
看亂了吧，說實話我也亂了，然后我就總結了一些，畫了一個思維導圖
好了，這樣算是大體上看了一遍datatable的doc，當然我們只是初步的看了一下，如果要進行比較深入的二次開發，那models，ext，oApi這三個命名空間肯定還要深入的研究，但是我覺得一般的表格操作都可以了。那接下來我會看看datatable下的example，extra，多看看范例，實踐一下，然后總結一下，可能新手在剛開始入門的時候會遇到下載下來的datatable各個文件夾都有哪些東西，如果開發需要引用哪些東西，其實有個思緒了，自己就可以慢慢的去研究，去開發。那我也會在下一篇說一下，好了，先就這樣吧，接下來再繼續深入。
以上全部都屬個人原創，請大家轉載的時候附上原創鏈接： http://www.cnblogs.com/tonylp