第230期 / December 5, 2016

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

DataTables 套件簡介

作者/龔柏元

[發表日期:2016/12/5]

前言

Table是一種網頁上常見的資料表示方式,以往在WebForm架構下,可直接透過內建的GridView控制元件,便可輕易達到資料的呈現與介面的操作;然而在MVC架構下,由於Control與View分離,Control只負責邏輯處理與資料彙整,View只負責外觀的呈現,介面與使用者的互動操作功能通常需要額外撰寫javascript才能達成。

本文所介紹的DataTables套件,便是專門針對table外觀介面與功能操作所設計的第三方套件,可大幅減少自行撰寫javascript互動操作功能的困難,有效降低網頁前端開發的複雜度。

DataTables簡介

DataTables套件是一種JQuery外掛套件,特別針對table此種資料的呈現方式,內部已實作了各種相關操作的功能,並提供具有彈性的客製化選項,開發人員只需要下載並引用相關函式庫,即可輕鬆實作出功能豐富的table介面。


《圖一》


功能介紹

DataTables套件提供相當豐富的功能性,以下範例簡單介紹幾種常用的options、events、API使用方式。

一、Options : 提供在初始化時可預先設定的功能選項

  • ordering - 設定排序功能

    《圖二》


  • paging - 設定分頁功能

    《圖三》


  • searching - 設定資料搜尋功能

    《圖四》


  • pageLength - 設定一頁所顯示的資料數

    《圖五》


  • select - 設定資料列的選取功能

    《圖六》


  • 二、Events : 提供在網頁元素綁定可觸發事件的功能選項

  • init - 當datatable初始化結束後觸發事件

    《圖七》


  • order - 當datatable排序發生後觸發事件

    《圖八》


  • page - 當datatable換頁發生後觸發事件

    《圖九》


  • search - 當datatable搜尋發生後觸發事件

    《圖十》


  • select - 當datatable內容被選取後觸發事件

    《圖十一》


  • 三、API : 提供API呼叫可進行更複雜的操作設定

  • ajax.reload( ) - 操作datatable透過ajax重新載入資料

    《圖十二》


  • order( ) - 操作datatable進行排序

    《圖十三》


  • page( ) - 操作datatable進行換頁

    《圖十四》


  • search( ) - 操作datatable進行搜尋

    《圖十五》


  • row( ).select( ) - 操作datatable進行列選取

    《圖十六》


  • 實作範例

    以下為使用MVC架構實作引用DataTables套件的簡單範例

  • 首先將下載套件中的css與js檔案引用進 _Layout.cshtml

    《圖十七》


    《圖十八》


  • 接著在View建立一個簡單的table,id命名為GroupTable

    《圖十九》


  • js檔案裡使用JQuery抓取前端View的GroupTable,並直接呼叫DataTables套件提供的API,針對table作初始化功能設定,最後經由ajax非同步傳輸的方式向Controller Action取得來源資料

    《圖二十》


  • Controller Action裡只需將後端DB彙整的資料,包裝成JSON物件後回傳

    《圖二十一》


  • 下圖即為程式執行的結果

    《圖二十二》


  • 結論

    DataTables套件簡單易用好上手,其內部已實作了相當豐富的常用功能,也提供許多彈性的客製化選項,並基於JQuery外掛的優勢,只需將套件下載後引用至程式中即可使用,非常值得推薦給有相關需求的網頁前端工程師。

    參考文獻

    1.DataTables download

    2.DataTables install

    3.DataTables reference

    4.jQuery套件測試 – DataTables

    5.Datatables套件與WebAPI搭配