TablesIgniter

TablesIgniter 基於 CodeIgniter4 與 jQuery DataTables
快速地建置符合 server-side processing mode 規則的 API

Tableslgniter is an addins base on CodeIgniter4.
It will help you use jQuery Datatables in server side mode.

造訪Git儲存庫

快速開始

建置簡單的 server-side processing mode DataTables

id title date
程式碼
<table id="firstTable">
    <thead>
        <tr>
            <th>id</th>
            <th>title</th>
            <th>date</th>
        </tr>
    </thead>
</table>
$('#firstTable').DataTable({
    "aoColumnDefs": [{ 
        "bSortable": false,
        "aTargets": [ 0,1,2 ] 
    }],
    "order":[],
    "serverSide":true,
    "searching": false,
    "lengthChange":false,
    "ajax":{
        url:"<?=base_url('home/firstTable')?>",
        type:'POST'
    }
});
public function firstTable(){
    $model = new HomeModel();
    $table = new TablesIgniter();
    $table->setTable($model->noticeTable())
          ->setOutput(["id","title","date"]);
    return $table->getDatatable();
}
  1. 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniter 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。
  2. 呼叫 setOutput() 方法必須傳入陣列,陣列的順序將會影響到 DataTables 所呈現資料的順序,字串的定義與 setTable() 所查詢的結果的欄位名稱必須相同。
  3. 呼叫 getDatatable() 將會獲得符合 jQuery DataTables 要求的 json 字串。
public function noticeTable(){
    $builder = $this->db->table("news");
    return $builder;
}
  1. 你可以自由使用 Query Builder 的所有方法,滿足你對資料庫查詢的所有需求,最後必須回傳 Query Builder 產生的物件。
CREATE TABLE `news` (
    `id` int(11) NOT NULL,
    `title` varchar(128) COLLATE utf8_unicode_ci NOT NULL,
    `date` date NOT NULL,
    `body` text COLLATE utf8_unicode_ci NOT NULL
) 
Composer 安裝套件

在運行著 CodeIgniter4 的專案根目錄下執行:

composer require monken/tablesigniter
Controllers 引入套件

在欲使用本套件的控制器宣告:

use monken\TablesIgniter;
完整示範

建立完整功能的 DataTables,TablesIgniter可以滿足你所需要的「串接HTML」、「搜索」、「排序」等常見功能。

action title date
程式碼
<table id="fullTable">
    <thead>
        <tr>
            <th>action</th>
            <th>title</th>
            <th>date</th>
        </tr>
    </thead>
</table>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
            </button>
            </div>
            <div class="modal-body">
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
$('#fullTable').DataTable({
    "aoColumnDefs": [{ 
        "bSortable": false,
        "aTargets": [ 0,1 ] 
    }],
    "order":[],
    "serverSide":true,
    "ajax":{
        url:"<?=base_url('home/fullTable')?>",
        type:'POST'
    }
});
function openInfo(body){
    $('.modal-body').html(body);
}
public function fullTable(){
    $model = new HomeModel();
    $table = new TablesIgniter();
    $table->setTable($model->noticeTable())
          ->setDefaultOrder("id","DESC")
          ->setSearch(["title","date"])
          ->setOrder([null,null,"date"])
          ->setOutput([$model->button(),"title","date"]);
    return $table->getDatatable();
}
  1. 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniter 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。
  2. 呼叫 setDefaultOrder() 方法必須傳入兩個參數,分別是欄位名稱及排序方法,它影響到的是預設的資料排序方式。若同時讓兩個欄位進行排序,只需重複呼叫這個方法即可。
  3. 呼叫 setSearch() 方法必須將一個陣列傳入其中。陣列中定義的欄位名稱與執行搜索功能時,TablesIgniter 進行模糊比對的欄位相關。
  4. 呼叫 setOrder() 方法時必須將一個陣列傳入其中。陣列中所定義的欄位名稱其順序與setOutput() 所輸出的順序相關。若某一列資料不參與排序,則傳入null即可。
  5. 呼叫 setOutput() 方法必須將一個陣列傳入其中,陣列的順序將會影響到 DataTables 所呈現資料的順序。陣列中字串的定義與 setTable() 所查詢結果的欄位名稱必須相同。 若某些欄位有 HTML 串接或者是額外處理資料的需求,setTable() 的陣列也可以將閉包(匿名函數)傳入其中,可以將額外的處裡邏輯寫在閉包內。
  6. 呼叫 getDatatable() 將會獲得符合 jQuery DataTables 要求的 json 字串。
public function noticeTable(){
    $builder = $this->db->table("news");
    return $builder;
}
public function button(){
    $closureFun = function($row){
        return <<<EOF
            <button class="btn btn-outline-info" onclick="openInfo('{$row["body"]}')"  data-toggle="modal" data-target="#exampleModal">info{$row["id"]}</button>
        \EOF;
    };
    return $closureFun;
}
  1. noticeTable():你可以自由使用符合 Query Builder 語法的所有方法,滿足你對資料庫查詢的所有需求,最後必須回傳 Query Builder 產生的物件。
  2. button():自定資料內容必須使用閉包進行包裝,閉包的引數「 $row 」是資料庫查詢成功的結果,你只能使用陣列造訪從資料庫回傳的資料。請注意,閉包的回傳值必須是字串。
CREATE TABLE `news` (
    `id` int(11) NOT NULL,
    `title` varchar(128) COLLATE utf8_unicode_ci NOT NULL,
    `date` date NOT NULL,
    `body` text COLLATE utf8_unicode_ci NOT NULL
)
public function tableSecPattern(){
    $model = new HomeModel();
    $table = new TablesIgniter($model->initTable());
    return $table->getDatatable();
}
  1. 若你希望在 Controller 初始化 TablesIgniter 時就完成所有的設定,請將設定用的陣列傳入其中。在這個情形下,這個陣列通常會在 Model 宣告。
public function initTable(){
    $builder = $this->db->table("news");
    $setting = [
        "setTable" => $builder,
        "setDefaultOrder" => [
            ["id","DESC"],
            ["body","DESC"]
        ],
        "setSearch" => ["title","date"],
        "setOrder"  => [null,null,"date"],
        "setOutput" => [
            function($row){
                return <<<EOF
                    <button class="btn btn-outline-info" onclick="openInfo('{$row["body"]}')"  data-toggle="modal" data-target="#exampleModal">info{$row["id"]}</button>
                \EOF;
            },
            "title",
            "date"
        ]
    ];
    return $setting;
} 
  1. initTable() 方法中所定義的陣列,其各項索引名稱與範例 Controller-1 所操作的方法名稱相同,陣列中值的資料結構也是相同的。
  2. 若你需要,你也可以在初始化時只定義部分內容,再將其他設定移至 Controller 實作,就像 Controller-1 那樣。