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.

造訪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(){
    $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();
}
  1. 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniterCI3 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。並且,你必須在第二個引數中傳遞執行 query 的資料表名稱。
  2. 呼叫 setOutput() 方法必須傳入陣列,陣列的順序將會影響到 DataTables 所呈現資料的順序,字串的定義與 setTable() 所查詢的結果的欄位名稱必須相同。
  3. 呼叫 getDatatable() 將會獲得符合 jQuery DataTables 要求的 json 字串。
public $builder;

public function __construct()
{
    parent::__construct();
    $this->load->database();
    $this->setNoticeTable();
}

public function setNoticeTable(){
    $this->builder = $this->db->select("*");
}
  1. 你可以自由使用 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
) 
安裝套件

git儲存庫 下載最新程式庫,或 點我下載 ,並將它放在 libraries 目錄中:

{yourProjectRoot}/application/libraries/TablesIgniterCI3.php
Controllers 引入套件

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

$this->load->library("TablesIgniterCI3");
完整示範

建立完整功能的 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">&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(){
    $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();                
}
  1. 呼叫 setTable() 方法必須傳入 Query Builder 物件,TablesIgniterCI3 倚賴這個物件所定義的資料庫查詢內容。這個物件通常會在 Model 宣告。並且,你必須在第二個引數中傳遞執行 query 的資料表名稱。
  2. 呼叫 setDefaultOrder() 方法必須傳入兩個參數,分別是欄位名稱及排序方法,它影響到的是預設的資料排序方式。若同時讓兩個欄位進行排序,只需重複呼叫這個方法即可。
  3. 呼叫 setSearch() 方法必須將一個陣列傳入其中。陣列中定義的欄位名稱與執行搜索功能時,TablesIgniterCI3 進行模糊比對的欄位相關。
  4. 呼叫 setOrder() 方法時必須將一個陣列傳入其中。陣列中所定義的欄位名稱其順序與setOutput() 所輸出的順序相關。若某一列資料不參與排序,則傳入null即可。
  5. 呼叫 setOutput() 方法必須將一個陣列傳入其中,陣列的順序將會影響到 DataTables 所呈現資料的順序。陣列中字串的定義與 setTable() 所查詢結果的欄位名稱必須相同。 若某些欄位有 HTML 串接或者是額外處理資料的需求,setTable() 的陣列也可以將閉包(匿名函數)傳入其中,可以將額外的處裡邏輯寫在閉包內。
  6. 呼叫 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;
}
  1. noticeTable():你可以自由使用 Query Builder 的所有方法,滿足你對資料庫查詢的所有需求。最後必須將 Query Builder 宣告為模型的公開屬性,讓 TablesIgniterCI3 可以取用。
  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
)
$this->load->model("NoticeModel","model");
$this->load->library(
    "TablesIgniterCI3",
    $this->model->initTable(),
    "table"
);
echo $this->table->getDatatable();
  1. 若你希望在 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;
} 
  1. initTable() 方法中所定義的陣列,其各項索引名稱與範例 Controller-1 所操作的方法名稱相同,陣列中值的資料結構也是相同的。
  2. 若你需要,你也可以在初始化時只定義部分內容,再將其他設定移至 Controller 實作,就像 Controller-1 那樣。