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
);
声明：任何转载请声明出处，并附上作者名与链接，否则将依法追究侵权责任。