DataTables 使用心得筆記

DataTables Example

DataTables 是一個 jQuery 的 plug-in, 目的在讓開發者快速產生具備瀏覽、排序的表格。又因為開發者及使用者常常有運用在後台管理的需求, 於是後來他們推出了付費版的 Editor, 讓開發者可以快速開發出能夠新增、瀏覽、修改及刪除 (CRUD) 資料的 DataTables。

這篇文章提到的內容主要著重於開發時遇到的一些問題, 像是自己的 Q&A。

1. 初始化 DataTables 時發生：

DataTables warning (table id = 'oTable'): Cannot reinitialise DataTable.
To retrieve the DataTables object for this table, pass no arguments or see the docs for bRetrieve and bDestroy

這種情況照字面就是重新初始化了 DataTables 的物件, 仔細找找有沒有其他地方已經偷偷載入而不自知。 由於原先的 DataTables 物件的設定參數與原先的有些差異, 就會導致這個錯誤訊息出現。

2. sDOM 格式：

轉換範例中各英文單字中小寫的則分別為 sDOM 參數所需要的變數, 更詳細的設定請參閱 sDOM 的說明文件。

3. 新增按鈕或是其他 DOM 物件：

如果是在表格以外的地方, 官方推薦使用 sDOM 產生出 DOM 之後, 接著使用 jQuery 或是 JavaScript 來新增元件在上面。

如果想要改變的是表格中的每列或每欄的物件的話, 則要使用上方初始化程式碼中的參數  "aoColumnDefs" , 接著藉由 "fnRender" 這個 API 來進行客製化改變。

4. Server-side Processing, 直接與伺服器端進行操作溝通：

DataTables 有一些自訂的參數名稱, 因此只要伺服器端的程式能夠順利接受 DataTables 所傳遞過去的參數, 並回傳其所需要的資料, DataTables 就可以在 UI 上展示搜尋、排序等工作。下面則是一個從 Gist 修改過後在 Tornado、MongoDB 可以使用的版本。