2013年5月11日 星期六

產生 jQuery UI DataTables 表格套件的 PHP 程式

測試完 DataTables 套件後 ("jQuery 套件 DataTables 的測試"), 雖然搞清楚了那些複雜選項的用法, 但為了能在 PHP 專案中快速搞定表格呈現, 我把它的常用設定寫成了 PHP 函式, 這樣以後只要簡單呼叫就能做出一個 DataTables 表格了. 此函式是針對表格資料來源為 Ajax JSON 而設的, 因為我們最常從後端資料庫擷取內容後, 在前端以表格呈現. 而對於資料來源為網頁本身者, 既然要在網頁上寫內容了, 那就連 jQuery 程式全部在前端寫吧, 不需要彆扭地用 PHP 來產出啊.
此函式主要的功能如下 :
  1. 預設不分頁, 但以 400px 的高度設定垂直捲軸, 資料長度不足時, 高度設定要自動瓦解.
  2. 分頁時預設是右下角為全套 (full_numbers) 按鈕, 右上角選單多一個 "全部"
  3. jQuery UI 預設不套用
  4. 預設語言為繁體中文
其呼叫介面如下 :

function get_datatable($id,
                                  $url,
                                  $column [,
                                $scrollY="400px" [,
                                  $paginate=false [,
                                $page_buttons="" [,
                                $jqueryui=false [,
                                  $locale="zh-TW"]]]]])

此函式有三個必要參數, 五個選項參數, 各參數說明如下 :

$id                 : 字串, table 元素之 id                             
$url                : 字串, Ajax 後端資料提供程式 url
$column         : 二維陣列, 表格欄位標頭 (設定 aoColumns 選項).
                        第一維乃關聯式陣列, 有四個索引 :
                       $column["title"]:"名稱"                   欄位名稱 (必須)
                       $column["width"]:"20px"/"20%"      欄位寬度 (非必須)
                       $column["class"]:"editClass"           樣式類別 (非必須)
                       $column["type"] :"string"/"numeric"  排序模式 (非必須, 預設 string)
$scrollY          : 字串, 指定垂直卷軸高度, 預設為 "400px", 格式為 CSS 高度.
                        設為 "50%" 表示捲軸高度為內容一半,
                         設為 "100%" 顯示全部內容, 捲軸消失.
$page_buttons : 字串, 分頁時設定右下角分頁按鈕類型, 預設 "full" :
                         "two"  : 上頁/下頁兩個按鈕 (即 two_button)
                         "full"    : 上頁/下頁/首頁/尾頁/鄰近5頁按鈕  (即 full_numbers)
$jqueryui          : true/false, 是否套用 jQueryUI 主題佈景, 預設 false
$locale             : 字串, 語言設定, 預設 "zh-TW", 若要英文介面則傳入 ""


這樣只要至少指定三個參數 : table 元素 id, 欄位表頭陣列, 以及提供資料的後端程式就行了, 預設是一個不分頁, 具有 400px 高度垂直捲軸的表格. 注意,  欄位表頭陣列 $columns 最起碼必須要有索引為 title 的元素 $column["title"] 即可, 其他 width/class/type 索引視需要而設, 例如 :

$url="get_stocks_list.php";
$column["title"]=array("編輯","股票名稱","股票代號");
$column["width"]=array("20px","20%","");
$column["class"]=array("editClass","","");
$column["type"]=array("","string","numeric");
echo get_datatable("table1", $url, $column); //不分頁, 有垂直捲軸 (400px)

其他呼叫範例如下 :

echo get_datatable("table1", $url, $column, "100%"); //不分頁, 列出全部資料
echo get_datatable("table1", $url, $column, "600px"); //不分頁, 有垂直捲軸
echo get_datatable("table1", $url, $column, "", true); //分頁 (全套按鈕)
echo get_datatable("table1", $url, $column, "", true, "two"); //分頁 (上下頁按鈕)
echo get_datatable("table1", $url, $column, "", true, "", true); //全套按鈕, 套用 jQuery UI
echo get_datatable("table1", $url, $column, "", true, "", true, ""); //上下頁按鈕, 套用 jQuery UI

接下來我們就延續上一篇文章 "jQuery 套件 DataTables 的測試" 的範例 21, 用我們這個 PHP 函式來產出相同的效果. 我們把範例  21 的 datatable_21.htm 修改為 datatable_22.php, 首先要匯入含有 get_datatable() 函式的函式庫 :


<?php
include_once("../lib/jqueryui.php");
?>

然後拿掉 table 元素與相關的 script, 改成 PHP 來輸出同樣的 jQuery 指令 :


<?php
$url="get_stocks_list_8.php";
$column["title"]=array("編輯","股票名稱","股票代號");
$column["width"]=array("20px","20%","");
$column["class"]=array("editClass","","");
$column["type"]=array("","string","numeric");
echo get_datatable("table1", $url, $column, "", true, "", true);  //分頁, jQueryUI, 全按鈕
?>

另外, 後端程式部分,  點某一列就開啟該股票的 Yahoo 股市今日行情畫面功能要改用超連結來實現 (因為我們的 PHP 函式功能固定了, 沒辦法再去讀取列). 只要把範例 21 的後端供檔程式 get_stocks_list_7.php 修改成如下的 get_stocks_list_8.php, 給 stock_id 加上 Yahoo 股市今日行情超連結就行了 :

header('Content-Type: text/html;charset=UTF-8');
$host="mysql.1freehosting.com"; //MySQL 主機位址
$username="tony1966_test"; //MySQL 使用者名稱
$password="123456"; //MySQL 使用者密碼
$database="testdb"; //資料庫名稱
$conn=mysql_connect($host, $username, $password); //建立連線
mysql_query("SET NAMES 'utf8'"); //設定查詢所用之字元集為 utf-8
mysql_select_db($database, $conn); //開啟資料庫
$SQL="SELECT * FROM `stocks_list`";
$result=mysql_query($SQL, $conn); //執行 SQL 指令

$stock=array();
for ($i=0; $i<mysql_numrows($result); $i++) { //走訪紀錄集 (列)
     $row=mysql_fetch_array($result); //取得列陣列
     $stock_name=$row["stock_name"];
     $stock_id="<a href='http://tw.stock.yahoo.com/q/q?s=".
                      $row["stock_id"]."' target='_blank'>".$row["stock_id"]."</a>";
     $edit="<a href='edit_stocks_list.php?stock_id=".$row["stock_id"]."&stock_name=".
               $row["stock_name"]."' target='_blank'><img src='edit.gif' ".
               "style='border-width:0px;width:15px;height:15px;'></a>";
     $stock[$i]=array($edit, $stock_name, $stock_id);
     } //end of for
$arr["aaData"]=$stock;
echo json_encode($arr);  //將陣列轉成 JSON 資料格式傳回

測試範例 22 : http://mybidrobot.allalla.com/jquerytest/datatable_22.php [看原始碼]

 結果是不是與範例 21 一樣? (因 CSS 樣式檔已改為  jquery.dataTables_themeroller.css 了, 故外觀有一點點不同). 不過我發現一個問題, 當左上角的每頁筆數選單改為不是 10 時, 表格內容會向右凸出約 10px, 看來有點突兀, 但這不是 PHP 產出的問題, 在上一篇文章 "jQuery 套件 DataTables 的測試" 的範例 16 就出現了. Why?  
接下來看看不分頁範例. 下列範例 23 則是不分頁有垂直捲軸的表格 :
<?php
$url="get_stocks_list_8.php";
$column["title"]=array("編輯","股票名稱","股票代號");
$column["width"]=array("20px","20%","");
$column["class"]=array("editClass","","");
$column["type"]=array("","string","numeric");
echo get_datatable("table1", $url, $column, "400px", false, "", true); //不分頁, jQuery UI
?>

 測試範例 23 : http://mybidrobot.allalla.com/jquerytest/datatable_23.php [看原始碼]

本週忙 DataTables 測試終於可以告一個段落了, 雖是半路殺出程咬金吸引了我的注意, 但也解決了我在 jQuery 專案設計上的大問題. 相信可以簡化與加速將來的專案開發.

於

沒有留言:

張貼留言