前端開發：一個開源、簡單易用的jQuery表格插件（DataTables）

DataTables是一個基於jQuery庫的開源（MIT協議）表格插件，支持添加、排序、分頁、搜索、過濾等功能，使用簡單、廣受歡迎，可以與主流前端UI整合（如bootstrap、jQuery UI等）。支持4種方式數據源，HTML（DOM）來源的數據、Ajax數據源、JavaScript的源數據、服務器端處理。擁有普遍的配置選項和豐富的API文檔。

一、下載與初始化

https://github.com/DataTables/DataTables

下載完成後解壓，把解壓後的文件放到項目任意位置，再在頁面引入jQuery、DataTablesCss、DataTablesJs三個文件。

而後在body中建立一個table元素，設置id屬性，以下圖所示。

最後運行如下腳本，代碼及效果以下。一個簡單的帶有分頁的表格就完成了。

language.url屬性是國際化文件地址，固然也能夠自定義名稱，更多國際化語言請前往官方網站了解詳情。

中文簡體：

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json

中文繁體：

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese-traditional.json

二、功能展現

⑴組件定位

datatables默認會打開部分組件，如分頁按鈕、表格信息、搜索框等，這些組件支持自定義佈局。

⑵不一樣分頁樣式

• numbers - 只有只有數字按鈕

• simple - 只有上一頁、下一頁兩個按鈕

• simple_numbers - 除了上一頁、下一頁兩個按鈕還有頁數按鈕，Datatables默認是這個

• full - 有四個按鈕首頁、上一頁、下一頁、末頁

• full_numbers - 除首頁、上一頁、下一頁、末頁四個按鈕還有頁數按鈕

• first_last_numbers - 除首頁、末頁兩個按鈕還有頁數按鈕

⑶多列排序

⑷格式化數字顯示格式

經過language.decimal選項能夠配置數字的友好顯示，好比1200450，顯示爲12.004,50

⑸隱藏列

索引從1開始，隱藏了二、3列的name和age。

⑹bootstrap樣式

須要額外引入dataTables.bootstrap.min.js、bootstrap.min.css、dataTables.bootstrap.min.css三個文件。

⑺垂直滾動條

⑻複雜表頭

⑼自定義事件

⑽列渲染

下面隱藏了年齡列，並把年齡拼接到姓名後。

官方網站：

https://www.datatables.net/

---

DataTables是目前使用普遍的表格插件之一，功能強大、文檔豐富、表格樣式豐富可以適應各類風格的網站，高度靈活可以爲HTML表格添加各類高級的交互功能。支持插件擴展使DataTables變得更增強大，它的功能遠不止於此，須要瞭解詳情的請前往官方網站。

有哪裏寫得很差的地方請你們提出來，請輕噴，謝謝。 同時有什麼與編程相關的好東西能夠推舉給我，再次感謝！