jQuery Datatable是一個流行的表格插件,在數據的展示、搜索、排序等方面都有非常強大的功能,同時還支持動態生成圖標。
//配置添加圖標按鈕 { "text": "添加記錄", "className": "btn btn-info", "action": function () { //自定義操作 } }
在這個示例中,我們使用了FontAwesome圖標庫中的“plus-circle”圖標,并將其嵌入到按鈕文本中。
//配置其他圖標 {"extend": "print", "text":"打印", "className": "btn btn-default"}, {"extend": "excel", "text":"導出Excel", "className": "btn btn-default"}
除了簡單的添加圖標按鈕外,jQuery Datatable還支持在其他地方使用圖標,比如排序的箭頭。
//樣式 table.dataTable thead .sorting:after { content: "\f0dc"; font-family: FontAwesome; } table.dataTable thead .sorting_asc:after { content: "\f0de"; font-family: FontAwesome; } table.dataTable thead .sorting_desc:after { content: "\f0dd"; font-family: FontAwesome; }
在這個示例中,我們使用FontAwesome中的三個圖標“sort”、“sort-asc”和“sort-desc”來表示不同的排序方式。
總之,jQuery Datatable的圖標功能非常強大并且易于使用,可以幫助你快速地制作出美觀的數據表格。