TablesIgniterCI3
TablesIgniterCI3 基於 CodeIgniter3 與 jQuery DataTables
快速地建置符合 server-side processing mode 規則的 API
TableslgniterCI3 is an Library base on CodeIgniter3.
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(){
$this->load->model("NoticeModel","model");
$this->load->library("TablesIgniterCI3",NULL,"table");
$this->table
->setTable($this->model->builder,"news")
->setOutput(["id","title","date"]);
echo $this->table->getDatatable();
}
- 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniterCI3 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。並且,你必須在第二個引數中傳遞執行 query 的資料表名稱。
- 呼叫 setOutput() 方法必須傳入陣列,陣列的順序將會影響到 DataTables 所呈現資料的順序,字串的定義與 setTable() 所查詢的結果的欄位名稱必須相同。
- 呼叫 getDatatable() 將會獲得符合 jQuery DataTables 要求的 json 字串。
public $builder;
public function __construct()
{
parent::__construct();
$this->load->database();
$this->setNoticeTable();
}
public function setNoticeTable(){
$this->builder = $this->db->select("*");
}
- 你可以自由使用 Query Builder 的所有方法,滿足你對資料庫查詢的所有需求。最後必須將 Query Builder 宣告為模型的公開屬性,讓 TablesIgniterCI3 可以取用。
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
)
完整示範
建立完整功能的 DataTables,TablesIgniterCI3 可以滿足你所需要的「串接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(){
$this->load->model("NoticeModel","model");
$this->load->library("TablesIgniterCI3",NULL,"table");
$this->table
->setTable($this->model->builder,"news")
->setDefaultOrder("id","DESC")
->setSearch(["title","date"])
->setOrder([null,null,"date"])
->setOutput([$this->model->button(),"title","date"]);
echo $this->table->getDatatable();
}
- 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniterCI3 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。並且,你必須在第二個引數中傳遞執行 query 的資料表名稱。
- 呼叫 setDefaultOrder() 方法必須傳入兩個參數,分別是欄位名稱及排序方法,它影響到的是預設的資料排序方式。若同時讓兩個欄位進行排序,只需重複呼叫這個方法即可。
- 呼叫 setSearch() 方法必須將一個陣列傳入其中。陣列中定義的欄位名稱與執行搜索功能時,TablesIgniterCI3 進行模糊比對的欄位相關。
- 呼叫 setOrder() 方法時必須將一個陣列傳入其中。陣列中所定義的欄位名稱其順序與setOutput() 所輸出的順序相關。若某一列資料不參與排序,則傳入null即可。
- 呼叫 setOutput() 方法必須將一個陣列傳入其中,陣列的順序將會影響到 DataTables 所呈現資料的順序。陣列中字串的定義與 setTable() 所查詢結果的欄位名稱必須相同。 若某些欄位有 HTML 串接或者是額外處理資料的需求,setTable() 的陣列也可以將閉包(匿名函數)傳入其中,可以將額外的處裡邏輯寫在閉包內。
- 呼叫 getDatatable() 將會獲得符合 jQuery DataTables 要求的 json 字串。
public $builder;
public function __construct()
{
parent::__construct();
$this->load->database();
$this->setNoticeTable();
}
public function setNoticeTable(){
$this->builder = $this->db->select("*");
}
public function button(){
$closureFun = function($row){
return "
<button class='btn btn-outline-info' onclick='openInfo(\"{$row["body"]}\")' data-toggle='modal' data-target='#exampleModal'>info{$row['id']}</button>
";
};
return $closureFun;
}
- noticeTable():你可以自由使用 Query Builder 的所有方法,滿足你對資料庫查詢的所有需求。最後必須將 Query Builder 宣告為模型的公開屬性,讓 TablesIgniterCI3 可以取用。
- 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
)
$this->load->model("NoticeModel","model");
$this->load->library(
"TablesIgniterCI3",
$this->model->initTable(),
"table"
);
echo $this->table->getDatatable();
- 若你希望在 Controller 初始化 TablesIgniter 時就完成所有的設定,請將設定用的陣列傳入其中。在這個情形下,這個陣列通常會在 Model 宣告。
public function initTable(){
$setting = [
"setTable" => [$this->builder,"news"],
"setDefaultOrder" => [
["id","DESC"],
["body","DESC"]
],
"setSearch" => ["title","date"],
"setOrder" => [null,null,"date"],
"setOutput" => [
function($row){
return "
<button class='btn btn-outline-info' onclick='openInfo(\"{$row["body"]}\")' data-toggle='modal' data-target='#exampleModal'>info{$row['id']}</button>
";
},
"title",
"date"
]
];
return $setting;
}
- initTable() 方法中所定義的陣列,其各項索引名稱與範例 Controller-1 所操作的方法名稱相同,陣列中值的資料結構也是相同的。
- 若你需要,你也可以在初始化時只定義部分內容,再將其他設定移至 Controller 實作,就像 Controller-1 那樣。