基于jQuery框架的DataTable組件設計與開發

李琦 李志卿 劉磊 高士琛 鄧婕

（中電科蓉威電子技術有限公司 四川省成都市 610031）

隨著互聯網技術的不斷進步和企業信息化建設水平的發展，基于B/S 架構下的Web 項目開發，逐漸成為開發的主流技術[1]。在實際項目開發過程中，查詢結果的數據呈現是大多數系統的必備功能。Datatable 是一款jQuery 表格插件，它是一個當前使用較為廣泛的表格工具，具備按行列顯示表格數據、分頁、篩選和排序等功能[2]。在現有的Datatable 表格插件中，表頭項基本在代碼中固定。當表格列數目過多時，會出現屏幕溢出；當表頭順序或顯隱需要調整時，需要在代碼中修改，靈活性、可修改性較差；各單元格如果內容較多時，會出現顯示內容不全，無法做到一目了然。現有的技術方案是通過開發人員修改硬編碼實現，實際操作性、靈活性不強，且會因為需求變化、屏幕分辨率不同等出現顯示異常，影響用戶體驗。因此，基于jQuery 設計一個通用的表格插件功能方法，實現當用戶業務需求發生變化時，不需重寫代碼，只需在頁面上以點擊按鈕的方式修改樣式文件，達到動態呈現數據的目的，此方法可以滿足個性化顯示需求，方便用戶使用。

1 流程設計

依據基于jQuery 的組件設計通用思路，在此基礎上拓展Datatable 表格插件功能方法[3]。首先在HTML頁面，使用grid 網格控件搭建table 表格，完成table 表格的初始建立，搭建基本框架，并在JavaScript 中綁定基于jQuery 的Datatable 組件，實現Datatable 基本表格顯示功能。在HTML 頁面設置按鈕，按鈕個數與顯示的列項一一對應。添加多個按鈕控件，將擴展功能以函數的形式進行封裝，以便調用，將相關方法與按鈕控件綁定；同時，將DataTable 組件與table 表格進行綁定。最后重寫DataTable 組件的JavaScript 和層疊樣式表CSS，以實現點擊不同的按鈕，實現的不同擴展功能。使用者可以在頁面上，通過點擊按鈕的方式，根據實際使用需求，靈活修改表頭的顯隱，顯示順序，設置每一列的顯示寬度和顯示各單元格全部數據。流程設計圖如圖1 所示。

圖1：設計流程圖

其中，JavaScript 簡稱“JS”，是一種具有函數優先的輕量級，解釋型或即時編譯型的編程語言，作用是嵌入動態文本于HTML 頁面，對用戶操作瀏覽器事件做出響應，實現相關功能[4]。CSS 是指層疊樣式表，作用是描述HTML 文檔樣式，本文是通過調用原有的Datatable 的CSS 樣式，將表格顯示出來[5]。

2 技術方案

除了基本的顯示、分頁、排序、搜索功能外，基于jQuery 的Datatable 組件還支持擴展和二次開發，以實現更加靈活的定制化功能。本文通過編寫Datatable 組件的JavaScript 代碼，實現相關拓展功能，并輔以CSS層疊樣式表，為HTML 頁面添加更多的功能和樣式。基于上述流程設計的詳細技術方案如下：

（1）在HTML 頁面完成table 表格的初始建立，加載table 表格的網格控件grid，包括：表頭標簽和表格內容；

（2）在同一HTML 頁面，設置列按鈕，列按鈕需與表頭標簽順序相同、內容相同；

（3）添加按鈕控件，包括列的顯示按鈕，列的隱藏按鈕，表格列數據顯示折行按鈕，設置表格顯示順序按鈕和設置表格列寬度按鈕，便于點擊相應按鈕實現相應的功能；

（4）調用DataTable 組件的JavaScript 和CSS，與表格的id 進行綁定，實現基本的顯示、分頁、排序和搜索功能；

（5）重寫DataTable 的JavaScript 和層疊樣式表CSS：

①添加獲取cookie 的方法，獲取指定名稱的cookie值，當獲取的是多個cookie 值時，保存的時候是以分號或空格分開；②添加設置cookie 的方法，將cookie 的value 值與表格的id 一一對應；③在執行完上述步驟4的時候，觸發添加表格列的初始化方法：首先獲取table對象、table 標簽的id 和模態框頂級