close

***小碎念***

每次選文章分類都覺得好累啊 ... QQ

網頁開發環環相扣，這次要放在哪個分類讓我傷了好陣子腦筋

也或許是還沒想清網誌的文章分類...不過暫時就先這樣了，之後也有可能考慮搬家~

有什麼建議的話也歡迎大家留言~

 

 

***進正題***

在任意的資訊系統中，很容易就是成千上萬筆的資料

以目前看過的設計方式大概有兩種 : 

  1. 列表呈現加搜尋區域，點選目標資料進入編輯頁面 ( 參考畫面 : 農委會的有機農業資訊網 )
  2. 一進去就是空白的編輯畫面，設定搜尋條件之後帶出符合的數筆資料，慢慢翻吧~ ( 避免一次載入大量資料 )

覺得還是有疑惑的話，可以翻翻看各大電商平台 XD ( 順便年底前買一波 )

當然也有以上的變形或一些調整，但總之就一句。

系統列表不可免!!

那當然如此成千上萬萬的列表，大家的做法也各自不同

簡單的列表當然可以用div或table自己拚出。但如果以資訊系統網站來說，基本的需求以我所知會包含

  1. 排序 : 點按標題以不同的資料項目排序，參考Excel的篩選功能
  2. 分頁 : 當資料過多時，分頁不但避免使用者等待過久，也不用一次看到太大量的資料
  3. 編輯 : 如上所述，通常列表後我們會希望有地方可以看到更詳細齊全的資料，所以通常列表後都會有一個編輯按鈕 ( 或是更多有的沒的的按鈕 )

以上要自己處理的話多多少少有點微的辛苦。這還是基本的，其他什麼塞欄位啊、下拉啦，飄出提示框啦就先不提了

(有另外一種填資料的又被稱為Grid，此處就先不提)

所以網頁系統多如繁星的第三方列表套件就出現了~

簡單的引用並設定後，通常就能幫你生出一個美美的列表還符合以上所有條件!

所以今天就是要來介紹DataTables!

 

 

***為什麼是DataTables***

為什麼要介紹DataTables呢?他有什麼過人之處嗎?

欸沒有，目前不太確定，只是我剛好需要用到www

所以把使用過程記錄下來 ( 被揍

 

 

***什麼是DataTables***

image

DataTables是一款基於jQuery的套件。藉由DataTables，我們可以獲得一個互動並包含諸多功能的表格。

就官網上所列包含 : 分頁、即時搜尋、多列排序、主題化、擴展與各種資料來源、適用行動裝置與多語系，而且還開源!!

這麼多功能是不是讓人很心動啊 XD 更多範例細節請參閱 : DataTables官網

該公司除了DataTalbes之外，另有CloudTables跟Editor，之後若有使用再另外介紹~

 

 

***開始列表***

因為我使用的是Visual Studio + ASP.NET MVC，有關於開一個專案就略過不提，歡迎自行Google ( 或是留言給我 XD )

要使用DataTables，首先在官網下載DataTables安裝包。

這邊提供了很多相關所需的套件，這點滿貼心的，像是剉冰選配料的感覺 ( 不

因為是一開始使用，先從基本的開始，按照預設的選項，勾選 Choose a Styling framework 及 Package 的 DataTables(如下圖)。

image

因為我專案中已經匯入 jQuery 跟 Bootstrap，所以有需要的朋友可自行選用。

而Extensions的部分就都先不選擇。後面再開篇幅討論~

最後在頁面最下方選擇 Download 頁籤並點按Download files，會包出一個DataTables.zip。

解壓縮後，將檔案放置到專案對應的位置中(要記得加入至專案)

到這裡為止，我們完成了DataTables的準備工作 ( 呼~ ) ， 終於可以開始寫程式了!!

 

在官網的首頁有很貼心地列出簡單三步驟!! 參考上圖

  1. 首先引用datatables js 與 css
  2. 調用此函式
  3. 得到一個完整的互動表格

下面還有一個按鈕包含完整的說明指南，那我們就開始試試看吧~

**原始的Table**

首先來看看什麼都沒套用的HTML原始Table長什麼樣子

image

原本的Table就長這樣，沒有下CSS的話連框線都沒有~

現在可是連手機都要畫花畫朵的時代，這樣的網頁怎麼出去見人?! ( 大誤 

**套用DataTables**

依照官網步驟，引用好datatables js 與 css後

在Script替Table調用函式DataTable()

HTML的部分如下

<table id="myTable">
    <tbody>
        <tr>
            <td>3</td>
            <td>老人與海</td>
        </tr>
        <tr>
            <td>4</td>
            <td>獅子王</td>
        </tr>
        <tr>
            <td>5</td>
            <td>白雪公主</td>
        </tr>
        <tr>
            <td>6</td>
            <td>小木偶</td>
        </tr>
        <tr>
            <td>7</td>
            <td>咆嘯莊園</td>
        </tr>
    </tbody>
</table>

以 jQuery 設定 Table 執行 DataTable 方法

<script>
    $(document).ready(function () {
        $('#myTable').DataTable();
    });
</script>

最後的執行結果

image

看起來好像有模有樣的~ 但這時如果切到網頁開發者工具(網頁按F12)，會發現其實有一個錯誤存在

Uncaught TypeError: Cannot read property 'mData' of undefined

這時可以透過dataTables逐步追查，或是直接查看官網 ~

從dataTables可以發現，因為 col 為 undefined 導致無法取得 mData

略過層層追蹤，最終原因其實就是沒有設定 thead

所以我們把thead加上後，再來看看結果

<table id="myTable">
    <thead>
        <tr>
            <td>標題A</td>
            <td>標題B</td>
            <td>標題C</td>
            <td>標題D</td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

image

這部分其實在DataTables官網首頁的「Full Getting Started Guide」內有說明 : 「 For DataTables to be able to enhance an HTML table, the table must be valid, well formatted HTML, with a header (thead) and a single body (tbody). An optional footer (tfoot) can also be used. 」

所以對DataTables來說，thead及tbody是必須的，而tfoot則可視需求加入~

 

最後再補充一個狀況，如果在網頁開發者工具收到錯誤 : Cannot set property '_DT_CellIndex' of undefined 或 Cannot read property 'mData' of undefined

那麼請確認，thead的標題數量，是不是與內容儲存格<td>數量不一致。

這是因為DataTables在處理Table的過程中，因取不到儲存格出現了undefined所導致。

且分頁啊排序啊等功能，當然也不會出現囉~

 

 

***休息時間***

那前面所講的排序跟分頁功能，到此就幾乎都包含了。

不過目前的做法沒有使用ajax，所以在資料量過大時，載入速度會稍微有點遲緩~

同時我們可以透過右上角的文字框進行簡單的搜尋，並替表格設定不同的預設樣式。

一個簡易的列表頁，是不是出乎意料的簡單啊? 希望這篇可以幫助到有需要的朋友~

如果有說明不清楚的地方，歡迎大家留言詢問~

其他細節設定，就再另外開文章說明囉~

arrow
arrow
    文章標籤
    Web Html JavaScript DataTables 資料列表 網頁開發 程式開發 學習 Web開發
    全站熱搜
    創作者介紹
    創作者 律晴音 的頭像
    律晴音

    聆風之境

    律晴音 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄