jQuery DataTables

• https://datatables.net/
• documentation: https://datatables.net/manual/

Info

• 簡單實現表單排序、分頁、搜尋功能
• 有很多實用的官方 Extensions
• 還有不少第三方製作的 Plugins

Formatted numbers

• https://datatables.net/plug-ins/sorting/formatted-numbers
• 一般表格排序會依照數字，但是如果欄位有文字(e.g. USD)，基本的排序就會問題
• without / with plugin

Sum

• https://datatables.net/plug-ins/api/sum()
• 在表格最後加入加總的結果
• demo

FixedHeader/FixedColumns

• https://datatables.net/extensions/fixedheader/
• https://datatables.net/extensions/fixedcolumns/
• 固定表格表頭與欄位
• demo

dom

• https://datatables.net/reference/option/dom

新增自訂的 element

• https://datatables.net/examples/advanced_init/dom_toolbar.html
• 設定表格格式

Other

自訂排序

• https://datatables.net/manual/data/index#DOM
• 直接設定 td 的 HTML5 屬性 data-order 或是 data-sort 的數值，會優先以此為依據排序

排序順序

• https://datatables.net/forums/discussion/30276/how-to-set-the-default-column-sort-to-descending-when-clicked
• 預設是第一次點擊是 asc，第二次點擊是 desc

{ "orderSequence": ["asc", "desc"] }

• 可以自訂順序規則，或是只允許一種排序方式；targets 可指定欄位，或使用 "_all" 修改全部的欄位

{ "orderSequence": ["desc", "asc"], "targets": "_all" }