跳到主要內容

[JQuery] DataTables相關資料與屬性設置

DataTables是一個非常好用的JQuery分頁套件,主要是屬性很多,可以進行客製化。

DataTables的官方網站

官方網站有許多屬性的相關資料,以下為

使用上的畫面大致為~

※自官方網站截下來的範例圖
屬性設定方式是在宣告datatable的function裡面塞入屬性。

$(document).ready(function() { 
             $('#example').dataTable( {
                          "bPaginate": false, 
                          "bLengthChange": false, 
                          "bFilter": true, 
                          "bSort": false, 
                          "bInfo": false, 
                          "bAutoWidth": false
              } ); 
} );

以下介紹幾個常用的屬性:(官網 Usage->Feature 裡有原文)

bAutoWidth:自動調整欄位寬度(true or false)

bFilter:右上角的關鍵字搜尋功能(true or false) 


bInfo:下方顯示Showing 1 to X of O entries欄位(true or false)

bJQueryUI:使用jQuery UI ThemeRoller

bLengthChange:左上角選擇一次顯示多少筆資料(true or false)

bPaginate:顯示下方切頁按鈕(true or false)

bProcessing:是否顯示"資料正在處理中"的提示(true or false)

bSort:關閉所有欄位的sorting(true or false),如果要關閉單一欄位使用"bSortable"

bStateSave:使用cookies記錄使用者目前瀏覽datatable的狀態(true or false),例如切到哪一頁,之後固定時間內回來還是會看到那一頁。



還有一些針對欄位設定的屬性:


aoData:設定每個欄位自己的屬性,以下範例為第六個欄位不能被關鍵字搜尋,也不能排序。

"aoData": [   null, null,  null,  null,  null,   { "bSortable": false, "bSearchable": false } ]

aaSorting:設定欄位排序的屬性,以下範例為第三個欄位(由0開始)以倒序排序。

"aaSorting": [[ 2, "desc" ]]




如果要進行語言標籤的設置,也可以在屬性部分進行設定:


oLanguage:設定各個語言標籤屬性,如下範例。

"oLanguage": {
                "sProcessing": "Processing...",
                "sLengthMenu": "Show _MENU_ entries",
                "sZeroRecords": "No matching records found",
                "sEmptyTable": "No data available in table",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
                "sInfoEmpty": "Showing 0 to 0 of 0 entries",
                "sInfoFiltered": "(filtered from _MAX_ total entries)",
                "sInfoPostFix": "",
                "sSearch": "Search:",
                "sUrl": "",
                "oPaginate": {
                    "sFirst":    "First",
                    "sPrevious": "Previous",
                    "sNext":     "Next",
                    "sLast":     "Last"
                }
}



 

留言

這個網誌中的熱門文章

[新竹] 系統傢俱各家比較與心得(三商美福、安德康、木可、歐德、綠的)

最近花蠻多時間在比較系統傢俱,與趕著預售屋客變有關,不過也因此了解不少。以往都覺得系統傢俱較死板、無造型、設計。但這次的經驗,讓我對系統傢俱有較不一樣的感覺。

其實,系統傢俱是個蠻能「客製化」的設計,只要自己有做足功課,我認為每家系統傢俱都可以達到客戶喜好的風格、效果,而它們相較於木工親民的價格真的會讓人感動落淚。

我自己的感覺是,大家(如:綠的、三商美福)的系統傢俱在聘請設計師上,較有經驗也較有獨特見解,而且空間規劃較熟練,比較抓得到客戶的喜好與需求,當然價格較高。

小家(如:木可、安德康等)的系統傢俱最大好處在於價格親民,但設計師如果也願意用心,做出來的作品一定不輸大的。前提是,客戶自己必須明白自己要的是甚麼?喜好?需求?風格.......等。

[生活] 幸福新居落成

這次預售屋拖了很久,所以我們匆匆安排裝修,同時也還有一些地方需要修繕,整個忙翻天了!但仍然很滿意這個新家,不管是格局還是大小,打算至少再住個十年!

時程上原先預定於 102年12月可以交屋,拖到103年3月底才勉強交到一個差強人意仍須修繕的屋。匆匆簽了切結,就安排木工入場。木工張先生也是很配合,4月11日就幫我們正式入場,該保護的都做好保護就開始施工。

[生活] 愛惠浦淨水器濾心更換之S100

用了快兩年的愛惠浦淨水器 (Ever Pure),天才的我竟然連第一道都沒換,沒辦法嘛~濾心很貴.....orz

今天逛大潤發,問了價格馬上衝一發,3100元買一送一,一隻1550元還算可以接受。只是以我使用的速度,我猜搬家後還不會換下一隻...不過放著不用保存期限可以放三年...應該還可以吧......?!orz

總之,趁著便宜,撿便宜的心態趨使我買回家自己換濾心,人性啊人性.....順便買了一隻全適用的第一道濾心約 90元。0w0