DataTable學習筆記–範例應用篇[2]

       上午的時候總結了一篇dataTable的基礎，變數，函數，一般都只用到defaults命名空間下的變數和函數。今天下午研究了一些範例，跟大家分享一下，還有一些dataTable使用的時候的一些基礎知識。

        大家可以到datatable官網上去下載最新的datatable外掛程式，大小隻有2.33MB，最新版本是1.9.4，解壓之後可以看到如下的檔案夾結構：

　

　　其中docs下是datatable的api文檔(裡面有datatable的命名空間，靜態變數，靜態函數)，examples下就是一些datatable的範例，非常有用的。

　　Extras下是一些其他開發人員開發的功能，如果需要使用這些功能，就需要額外引用並改寫相應的js檔案。

　　Media下包含了一般我們開發需要的js檔案，image檔案，css，如所示，其中src檔案夾下包含了拆分過的datatablejs檔案,但是這裡面的js檔案  沒有包含任何警告，所以除非你已經很熟悉了，還是不要碰它的好，unit_testing下是一些單元測試，裡面有挺多的php檔案，我沒有學過，不會。

　　　　Scripts下檔案也可以不管。那我們到底應該引用哪些檔案來開發呢，

  　　　 Js檔案包括

　　　　　　Media/js/ jquery.js（必須先引用jquery.js檔案，再引用datatable的js檔案）

  　　　　　 Media/js/jquery.dataTables.min.js（當然可以引用jquery.dataTables.js，只不過前者是經過壓縮了，更小一些）

 　　　 Css檔案包括：

  　　　　Media/css/jquery.dataTables_themeroller.css

　　　　  Media/css/jquery.dataTables.css

  　　  當然你也可以引用css下的demo.css，外掛程式裡帶的css，但是最好自己改一下，或者用jqueryui，可以好看一些，在下面我會給出如何引用jqueryui，需要哪些引用哪些檔案

　　　　 Images檔案包括：

  　　　　　　直接將images檔案夾拷貝引入，下面是我的檔案結構（我用的是apanta studio開發的）

　　　　　基本上這些就夠了，如果你想要美化一下這個外掛程式，使用jqueryui，那還需要引入jqueryui/css下的images和jquery-ui-1.8.21.custom.css(我用的版本是這個)，表格會漂亮一些，但是我建議哦，還是自己寫，或是拿它的demo還有jqueryui的css拼一下，有時間的話，我就寫一個，跟大家分享一下。

      　　因為以前html頭都是定好了的，那時候我也對css一竅不通，剛剛拿chorme審查元素，發現這個css真是亂啊，好了，好了，我還是重新再寫一個吧，順便與大家分享一下，寫的不一定好，請見諒：

           

View Code

/* *  File:         dataTable_lp.css *  Description:  CSS descriptions for DataTables demo pages *  Author:       tonyLp *  Created:      2013-3-2 *  Language:     CSS * *  Note:        short for jquery-ui-1.8.21.custom.css * include      ui-bg_highlight-soft_100_deedf7_1x100.png *                 ui-bg_glass_80_d7ebf9_1x400.png *                 ui-icons_3d80b3_256x240.png *                 ui-icons_72a7cf_256x240.png *  Copyright 2013 tonyLp. All Rights Reserved. */.ui-helper-clearfix:before, .ui-helper-clearfix:after {         content: "";         display: table; }    .ui-helper-clearfix:after {         clear: both; }     .ui-helper-clearfix {         zoom: 1; }.ui-widget-header {     border: 1px solid #aed0ea;     background: #deedf7 url(../images/ui-bg_highlight-soft_100_deedf7_1x100.png) 50% 50% repeat-x;    color: #222222;     font-weight: bold;     font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1em;    /* 如果覺得字型太文藝了，可以直接刪除*/}.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {    border: 1px solid #aed0ea;     background: #d7ebf9 url(../images/ui-bg_glass_80_d7ebf9_1x400.png) 50% 50% repeat-x;     color: #2779aa; }     .ui-state-default .ui-icon {     background-image: url(../images/ui-icons_3d80b3_256x240.png); }.ui-icon-carat-2-n-s {     background-position: -128px 0; }.ui-icon {     width: 16px; height: 16px; background-image: url(../images/ui-icons_72a7cf_256x240.png); }.ui-icon-triangle-1-s {     background-position: -64px -16px; }.ui-icon-triangle-1-n {     background-position: 0 -16px; }

 

        基本上寫完了，下面是源碼，都是摘自jquery-ui-1.8.21.custom.css。使用時還需要附帶四張圖片，ui-bg_highlight-soft_100_deedf7_1x100.png，ui-bg_glass_80_d7ebf9_1x400.png，ui-icons_3d80b3_256x240.png，ui-icons_72a7cf_256x240.png，為了防止版本不同，找不到這四張圖片的，可以給我留言，我發郵件給你們。

         具體的在源碼中都有說明，目錄結構如下：

　　如下：

應該夠仔細了，想來總不會有什麼問題了吧。

 

有關於檔案夾分析，使用的時候需要引用哪些檔案都已經說完了，總過就220kb，但是很多功能都可以實現了，那接下來就是一些範例了，也都是我自己瞎鼓搗，然後覺得不錯的一些記錄一下。可能沒有什麼規律可言了。

1.細節：分頁顯示， 

"sPaginationType": "full_numbers"

如果沒有寫，則：

2.說明一點，dataTable外掛程式初始化的時候有很多變數都是預設true的，例如：

"bPaginate": true,

        "bLengthChange": true,

        "bFilter": true,

        "bSort": true,

        "bInfo": true,

        "bAutoWidth": true(這個挺有用的，不過要小心，會有一些效能問題)

3.1 排序，dataTable可以多列排序，按住shift，然後選擇列就可以了。在初始化的時候，如果想多項排序的話，可以使用: "aaSorting": [ [0,'asc'], [1,'asc'] ]

3.2 更改定序（自訂定序）

3.3 類型排序，非規則排序（這個是一個挺重要的功能點，另外單獨開一篇吧，詳細說說用dataTable的各種排序）

4. 列隱藏，設定’bVisible’:false 就可以了，注意bVisible 和bSearchable區別，如果設定了bSearchable：false，那麼過濾功能對該列也是無效了，也就是真正意義上的不可見了。bVisible還是可以訪問的。

5. 複雜表頭（一列多行，一行多列），動態表頭（這個在我之前的博文中實現過，但是感覺還可以寫的再精鍊一點）

　　　　圖片多了一些，篇幅也挺長了，有關於排序，複雜表頭我會在之後的文章中列出。

　　　　 以上全部都屬個人原創，請大家轉載的時候附上原創連結： http://www.cnblogs.com/tonylp