DataTables是一個基於jQuery庫的開源（MIT協議）表格插件，支持添加、排序、分頁、搜索、過濾等功能，使用簡單、廣受歡迎，能夠與主流前端UI整合（如bootstrap、jQuery UI等）。支持4種方式數據源，HTML（DOM）來源的數據、Ajax數據源、JavaScript的源數據、服務器端處理。擁有廣泛的配置選項和豐富的API文檔。
1、下載與初始化
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
2、功能展示
⑴組件定位
datatables默認會打開部分組件，如分頁按鈕、表格信息、搜索框等，這些組件支持自定義布局。
⑵不同分頁樣式
-
numbers - 只有只有數字按鈕
-
simple - 只有上一頁、下一頁兩個按鈕
-
simple_numbers - 除了上一頁、下一頁兩個按鈕還有頁數按鈕，Datatables默認是這個
-
full - 有四個按鈕首頁、上一頁、下一頁、末頁
-
full_numbers - 除首頁、上一頁、下一頁、末頁四個按鈕還有頁數按鈕
-
first_last_numbers - 除首頁、末頁兩個按鈕還有頁數按鈕
⑶多列排序
⑷格式化數字顯示格式
通過language.decimal選項可以配置數字的友好顯示，比如1200450，顯示為12.004,50
⑸隱藏列
索引從1開始，隱藏了2、3列的name和age。
⑹bootstrap樣式
需要額外引入dataTables.bootstrap.min.js、bootstrap.min.css、dataTables.bootstrap.min.css三個文件。
⑺垂直滾動條
⑻復雜表頭
⑼自定義事件
⑽列渲染
下面隱藏了年齡列，並把年齡拼接到姓名后。
官方網站：
https://www.datatables.net/
DataTables是目前使用廣泛的表格插件之一，功能強大、文檔豐富、表格樣式豐富能夠適應各種風格的網站，高度靈活能夠為HTML表格添加各種高級的交互功能。支持插件擴展使DataTables變得更加強大，它的功能遠不止於此，需要了解詳情的請前往官方網站。
有哪里寫得不好的地方請大家提出來，請輕噴，謝謝。 同時有什么與編程相關的好東西可以推舉給我，再次感謝！