jQuery Datatable（V1.10.7） server side processing

 　　Datatable是jQuery一個強大的插件，詳見https://www.datatables.net/，下面本人略總結在CodeIghiter框架的前端使用datatable的方法。

常用的配置選項：

根據數據源、性能要求可以配置各種配置項，下面列舉幾個常用的選項：

•aaData: js array數據源數組，格式可以是二維數組 [ [a,b,c],[d,e,f] ] 或json串數組（支持深度嵌套），后者需結合列定義的mData選項，指定目標數據；

•bDeferRender:延遲渲染模式，開始只生成當前頁所需的DOM結構，可以極大提高加載速度（適用js array和ajax source數據源）；

•aaSorting:指定預設排序列，如需不需要預設排序可以指定為[]；

•bSortClasses： 排序操作時給對應列的單元格加上區分標記用的class，可以指定false以禁用，提高大數據量的排序操作；

•aLengthMenu,iDisplayLength,sPaginationType： 分頁、頁碼相關配置項，較簡單，可以參考官方API；

•oLanguage：語言包選項，可以分別指定各子語句翻譯或賦值整個包對象（json串），也可以指定 sUrl 值通過ajax方式獲取語言包文件（目前在我們的產品中，已全部改用直接賦值語言包對象，以避免一些請求被轉向的異常情況）。

列定義選項：

•列定義（column）是Data Table配置中較重要也是較復雜的配置選項，主要涉及單元數據獲取、排序、過濾等選項；

•列定義主要有2個參數：aoColumnDefs 和 aoColumns ，兩者基本一致，區別在於aoColumnDefs可以指定作用的列，而aoColumns需要每列逐一配置，與table實際列數保持一致；

•mRender：與mData基本一樣，但少了改變目標值的特性，主要用於區分處理TD值的顯示、過濾、排序；

•bSearchable, bSortable：設置列可否過濾、排序；

•sClass：設置列樣式class；

回調函數選項：

•fnDrawCallback：每次表格重畫時回呼，包括翻頁、排序、過濾都會觸發此function，可以在此加入需要處理的操作；

•fnPreDrawCallback：每次表格重畫前回呼，可以在觸發翻頁、排序等操作之前進行預處理。

 

view:

1.首先需要進行Datatables的一些基礎配置：

  

　　“bServerSide”: true,

   “bProcessing”: true, //顯示提示正在工作中

    “bPaginage”: true,

   “sPaginationType”: “two_buttons”,

 

2.“sAjaxSource” ：用來向DataTable指定加載的外部數據源（如果想使用現有的數據，請使用aoData）可以簡單的提供一個可以用來獲得資料url或者JSON對象，該對象必須包含aaData，作為表格的數據源。

  

<?PHP
    echo "\"sAjaxSource\": \"/xxxx/xxx/",";
?>

 

3.“fnServerData” ：此參數可以修改默認功能，從服務器獲取數據（$.getJSON），這樣更適合應用程序。

"fnServerData": function (sSource, aoData, fnCallback) {
        $.ajax
             ({
                  "dataType": "json",

                  "type": "POST",

                  "url": sSource,

                  "data": aoData,

                  "success": fnCallback

              });

},

 

4. 新版本Datatables與舊版本的不同:

1). “fnRender”: function (setting) { }                "mRender": function (data, type, row) { } ;

2). "sPaginationType“: “two_buttons” or “full_numbers”

– simple - 'Previous' and 'Next' buttons only

–simple_numbers - 'Previous' and 'Next' buttons, plus page numbers

–full - 'First', 'Previous', 'Next' and 'Last' buttons

–full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers

 

 

5. "fnPreDrawCallback":  在每一個表格draw事件發生前調用該函數，通過返回false來取消draw事件其它任何的返回值，包括undefined都會導致draw事件的發生。

 

Controller:

Controller負責將把view傳遞過來的paging,sorting,searching的信息判斷整理，通過model獲取data list傳送給view顯示。

//Paging:

  $iDisplayStart = $this->input->get_post('iDisplayStart', true);

  $iDisplayLength = $this->input->get_post('iDisplayLength', true);

  if(isset($iDisplayStart) && $iDisplayLength != '-1')

        {
           $this->db->limit($this->db->escape_str($iDisplayLength),

      　　　$this->db->escape_str($iDisplayStart));

        }

//Ordering:

  $sTable = 'table_logs_event';

  $aColumns = array('id', 'ack', 'datetime', 'category', 'level', 'dev_mac', 'log_evt');

  $iSortCol_0 = $this->input->get_post('iSortCol_0', true);

  $iSortingCols = $this->input->get_post('iSortingCols', true);


if(isset($iSortCol_0))

        { for($j=0; $j<intval($iSortingCols); $j++)

            {   $iSortCol = $this->input->get_post('iSortCol_'.$j, true);

                $bSortable = $this->input->get_post('bSortable_'.intval($iSortCol), true);

                $sSortDir = $this->input->get_post('sSortDir_'.$j, true);

       if($bSortable == 'true')

          {  $this->db->order_by($aColumns[intval($this->db->escape_str($iSortCol))]  ,  

　　　　　　　 $this->db- >escape_str($sSortDir));   }

} }

//Filtering:

$sSearch = $this->input->get_post('sSearch', true);

 

if(isset($sSearch) && !empty($sSearch))

        { for($i=0; $i<count($aColumns); $i++)

            { $bSearchable = $this->input->get_post('bSearchable_'.$i, true);

              //單行排序

                if(isset($bSearchable) && $bSearchable == 'true')

                {  if ( $criteria == "unread" )

　　　　　　　　　　　　　　$this->db->or_like($aColumns[$i], $this->db->having('ack', 0)->escape_like_str($sSearch));

         　　　　　　else

                  　　　 $this->db->or_like($aColumns[$i], $this->db->escape_like_str($sSearch));

                } 
        } 
}

 

 Model:

Model負責從數據表獲取Data list,以及所有需要顯示的信息。

$this->db->select('SQL_CALC_FOUND_ROWS '.str_replace(' , ', ' ', implode(', ', $aColumns)), false);

        if ( $criteria == "unread" )

        {  $this->db->where('ack', 0);  }

        $query = $this->db->get($sTable);

        $this->db->select('FOUND_ROWS() AS found_rows');

        $iFilteredTotal = $this->db->get()->row()->found_rows;

        $iTotal = $this->db->count_all($sTable);

        $output = array(

            "sEcho" => intval($sEcho),   //頁面傳遞用以標記的參數

            “iTotalRecords” => $iTotal,   //總的數據條數

            “iTotalDisplayRecords” => $iFilteredTotal,  //獲取顯示在頁面上的數據條數

            “aaData” => array()    //獲取data list

        );   

 

  

 聲明：任何轉載請聲明出處，並附上作者名與鏈接，否則將依法追究侵權責任。