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.
快速開始
建置簡單的 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();
}
- 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniter 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。
- 呼叫 setOutput() 方法必須傳入陣列,陣列的順序將會影響到 DataTables 所呈現資料的順序,字串的定義與 setTable() 所查詢的結果的欄位名稱必須相同。
- 呼叫 getDatatable() 將會獲得符合 jQuery DataTables 要求的 json 字串。
public function noticeTable(){
$builder = $this->db->table("news");
return $builder;
}
- 你可以自由使用 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">×</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();
}
- 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniter 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。
- 呼叫 setDefaultOrder() 方法必須傳入兩個參數,分別是欄位名稱及排序方法,它影響到的是預設的資料排序方式。若同時讓兩個欄位進行排序,只需重複呼叫這個方法即可。
- 呼叫 setSearch() 方法必須將一個陣列傳入其中。陣列中定義的欄位名稱與執行搜索功能時,TablesIgniter 進行模糊比對的欄位相關。
- 呼叫 setOrder() 方法時必須將一個陣列傳入其中。陣列中所定義的欄位名稱其順序與setOutput() 所輸出的順序相關。若某一列資料不參與排序,則傳入null即可。
- 呼叫 setOutput() 方法必須將一個陣列傳入其中,陣列的順序將會影響到 DataTables 所呈現資料的順序。陣列中字串的定義與 setTable() 所查詢結果的欄位名稱必須相同。 若某些欄位有 HTML 串接或者是額外處理資料的需求,setTable() 的陣列也可以將閉包(匿名函數)傳入其中,可以將額外的處裡邏輯寫在閉包內。
- 呼叫 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;
}
- noticeTable():你可以自由使用符合 Query Builder 語法的所有方法,滿足你對資料庫查詢的所有需求,最後必須回傳 Query Builder 產生的物件。
- 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();
}
- 若你希望在 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;
}
- initTable() 方法中所定義的陣列,其各項索引名稱與範例 Controller-1 所操作的方法名稱相同,陣列中值的資料結構也是相同的。
- 若你需要,你也可以在初始化時只定義部分內容,再將其他設定移至 Controller 實作,就像 Controller-1 那樣。