jQuery 與 DataTables Ajax 實作記錄

※目前已實現的功能
1.根據 url 頁數直接跳至該頁資料
2.排序功能
3.Ajax 取得資料
4.jQuery UI 分頁顯示
5.關鍵字查詢 Ajax 處理

※未實現的部份
1.多欄位排序

因為這邊只是記錄，所以寫的有點草...(汗

$TABSTR 的內容

$data['TABSTR']  = '{"aTargets":[0],"sName":"'.$this->LANG['global_form_lbl_id'].'","sTitle":"'.$this->LANG['global_form_lbl_id'].'","mDataProp":"aId","sClass":"tCenter","bSortable":true,"sWidth":"50px"},';
$data['TABSTR'] .= '{"aTargets":[1],"sName":"'.$this->LANG['account_form_field_aName'].'","sTitle":"'.$this->LANG['account_form_field_aName'].'","mDataProp":"aName","sClass":"tLeft"},';
$data['TABSTR'] .= '{"aTargets":[2],"sName":"'.$this->LANG['account_form_field_aAcc'].'","sTitle":"'.$this->LANG['account_form_field_aAcc'].'","mDataProp":"aAcc","sClass":"tCenter"},';
$data['TABSTR'] .= '{"aTargets":[3],"sName":"'.$this->LANG['account_form_field_aType'].'","sTitle":"'.$this->LANG['account_form_field_aType'].'","mDataProp":"aType_name","sClass":"tCenter"},';
$data['TABSTR'] .= '{"aTargets":[4],"sName":"'.$this->LANG['account_form_field_aLastlogin'].'","sTitle":"'.$this->LANG['account_form_field_aLastlogin'].'","mDataProp":"aLastlogin","sClass":"tCenter"},';
$data['TABSTR'] .= '{"aTargets":[5],"sName":"'.$this->LANG['account_form_field_aLastip'].'","sTitle":"'.$this->LANG['account_form_field_aLastip'].'","mDataProp":"aLastip","sClass":"tCenter"},';
$data['TABSTR'] .= '{"aTargets":[6],"sName":"'.$this->LANG['global_form_label_status_title'].'","sTitle":"'.$this->LANG['global_form_label_status_title'].'","mDataProp":"status","sClass":"tCenter","sWidth":"60px"},';
$data['TABSTR'] .= '{"aTargets":[7],"sName":"'.$this->LANG['global_form_label_func_title'].'","sTitle":"'.$this->LANG['global_form_label_func_title'].'","mDataProp":"func","sClass":"tCenter","bSortable":false,"sWidth":"100px"}';

View - list.php Javascript 的部份

<script type="text/javascript" src="<?=js_url();?>DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
<style type="text/css" title="currentStyle">
 @import "<?=js_url();?>DataTables-1.9.4/media/css/demo_page.css";
 @import "<?=js_url();?>DataTables-1.9.4/media/css/demo_table_jui.css";
 @import "<?=js_url();?>DataTables-1.9.4/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>

<script type="text/javascript">
$('document').ready(function(){
 var nowPage = 1;
 
  $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
   {
  return {
    "iStart":         oSettings._iDisplayStart,
    "iEnd":           oSettings.fnDisplayEnd(),
    "iLength":        oSettings._iDisplayLength,
    "iTotal":         oSettings.fnRecordsTotal(),
    "iFilteredTotal": oSettings.fnRecordsDisplay(),
    "iPage":          Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
    "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
  };
   };
   
 var oTable = $('#tablist').dataTable({
  "iDisplayStart": <?=$this->page_num*(($NOW_PAGE==1)?0:($NOW_PAGE-1));?>, //開始筆數
  "bJQueryUI": true,
  "sDom": '<"H"l<"funcBox">>rt<"F"ip><"clear">',
  "sPaginationType": "full_numbers",
  "oLanguage":{"sUrl":"<?=js_url();?>DataTables-1.9.4/language/<?=$this->config->config['language'];?>.txt"},
  "bFilter" : false,  //是否有篩選功能
  "iDisplayLength": 10, //每頁筆數
  "bInfo" : true, //是否要顯示資訊
  "bSort" : true,// 排序
  "bAutoWidth": true,
  "bLengthChange": true, //是否可變更每頁筆數
  "aLengthMenu": [[10,30,50,'All'], [10,30,50,-1]], //分頁選單
  "bProcessing": true,
  "bServerSide": true,
  "bRetrieve" : true,
  "aoColumnDefs":[<?=$TABSTR;?>],
  "sAjaxSource": "<?=site_url('admin/'.$this->_func.'/getDataResult');?>",
  "aaSorting": [[0,"asc"]], //排序欄位
  "bStateSave": true,
  "fnServerData": function (sSource, aoData, fnCallback){
    nowPage = this.fnPagingInfo().iPage+1;
    aoData.push({"name": "q","value": encodeURIComponent($('#q').val())}); //帶入查詢關鍵字 q 參數
    aoData.push({"name": "nowpage","value": nowPage}); //帶入目前頁數
    $.ajax({
     "dataType": "json",
     "type": "POST",
     "url": sSource,
     "data": aoData,
     success: function(data) { 
      fnCallback(data);
     }
    });
   },
  "fnDrawCallback": function () {
   <?php if($this->access_library->checkAuth(array('admin','it'))):;?>
     $("div.funcBox").html('<label><a href="javascript:;" class="btn" onclick="openTr(\'add\',\'0\');"><?=$this->LANG['global_form_label_add_btn'];?></a></label>');
     <?php endif;?>
   var oSettings = oTable.fnSettings();
    oSettings.iDisplayLength = <?=$this->page_num;?>;
   // Configura a exibição do campo
   $("#gotoPage").remove();
   /*
   $(".dataTables_wrapper .dataTables_paginate:visible")
   .append("<span id='gotoPage'><input style='width:30px; margin-left: 2px;' value='" +
   $(".paginate_active").text() + "'><!--<span style='font-family:Arial;font-size:9pt;margin-left:2px; color: #eee;'>" +
   Math.ceil(oSettings._iRecordsDisplay / oSettings._iDisplayLength) +
   "</span>--></span>");
   */
   // Configura o evento
   $("#gotoPage").die('change').live('change',function(){
   // Set new page
   var iPage = (parseInt($("#gotoPage input").val()) - 1) * oSettings._iDisplayLength;
   oSettings._iDisplayStart = iPage;
    
   // Redraw table
   $(oSettings.oInstance).trigger('page', oSettings);
   oSettings.oApi._fnCalculateEnd( oSettings );
   oSettings.oApi._fnDraw( oSettings );
   });
 }
    }); 
});
</script>

View - list.php 表格的部份

<table cellpadding="0" cellspacing="0" border="0" class="display" id="tablist" name="tablist">
 <thead>
 </thead>
 <tbody>
    </tbody>
</table>

Controller

$RESULT_DATA = array(
 array("aId"=>1,
  "aName"=>"顏小稀",
  "aAcc"=>"marco",
  "aType_name"=>"管理者",
  "aLastlogin"=>"1980-05-08 08:14:00",
  "aLastip"=>"127.0.0.1",
  "status"=>"",
  "func"=>"")
);

$output = array(
            "sEcho" => intval($this->input->post('sEcho',true)),
            "iTotalRecords" => 1, //總筆數
            "iTotalDisplayRecords" => count($RESULT_DATA), //本次筆數
            "aaData" => (count($RESULT_DATA)==0)?array():$RESULT_DATA
        );

$response = json_encode($output);
echo $response;

※相關連結
DataTables
https://datatables.net/

jQuery
http://jquery.com/