jquery之datatable.js与CI整合 异步加载（大数据量处理）

1、CI 控制器添加方法

$this->show_fields_array=array(

"truename"=>"列1",

"item_goods"=>"列2",

"item_store"=>"列3",

"post_status"=>"列4",

"post_date"=>"列5",

"goods_from"=>"列6"

);

$this->select_fields=implode(",",array_keys($this->show_fields_array));

/**

* 加载列表页

*/

public function index()

{

$result=$this->menu;

$result["all_table"]=$this->create_table("all_table");

$result["internal_table"]=$this->create_table("internal_table");

$result["overseas_table"]=$this->create_table("overseas_table");

$result["show_fields"]=$this->select_fields;

$this->Header('public/header', $result);

$this->Left_Menu('public/left_menu', $result);

$this->Template('bl/data_statistics', $result);

$this->Footer('public/footer', $result);

}

/**

* 获取列表数据

*/

public function get_data_tables(){

$param["sEcho"] = $this->input->get('sEcho',true); // DataTables 用来生成的信息

$param["start"] = $this->input->get('iDisplayStart',true); //显示的起始索引

$param["length"] = $this->input->get('iDisplayLength',true);//显示的行数

$param["sort_th"] = $this->input->get('iSortCol_0',true);//被排序的列

$param["sort_type"] = $this->input->get('sSortDir_0',true);//排序的方向 "desc" 或者 "asc".

$param["search"] = $this->input->get('sSearch',true);//全局搜索字段

$param["select_fields"]=$this->select_fields;

$param["show_fields_array"]=$this->show_fields_array;

$output=$this->bl_ds->fetch_more($param);

$output=$this->handle_list($output);

echo json_encode($output); //最后把数据以json格式返回

}

/**

* 处理列表数据

* @param $output

* @return mixed

*/

private function handle_list($output){

if($output["iTotalRecords"]<1) return $output;

return $output;

}

/**

* 创建静态表格

* @param $class

* @return mixed

*/

private function create_table($class){

$this->load->library('table');

$this->table->set_heading(array_values($this->show_fields_array));

$tmpl = array ( 'table_open' => '<table id="'.$class.'" cellpading="0" cellspacing="0" border="0" class="dTable '.$class.' table table-bordered table-striped">' );

$this->table->set_template($tmpl);

$table=$this->table->generate();

return $table;

}

2、模型

public function fetch_more($param){

$select_fields=isset($param["select_fields"])?$param["select_fields"]:"";

$show_fields_array=isset($param["show_fields_array"])?$param["show_fields_array"]:"";

$sEcho=isset($param["sEcho"])?$param["sEcho"]:"";

$start=isset($param["start"])?$param["start"]:0;

$length=isset($param["length"])?$param["length"]:30;

$sort_th=isset($param["sort_th"])?$param["sort_th"]:0;

$sort_type=isset($param["sort_type"])?$param["sort_type"]:"asc";

$search=isset($param["search"])?$param["search"]:"";

$select_fields=implode(",",$show_fields_array);

#按照排序的列 查询

$fields_key=array_values($show_fields_array);

$order_key=$fields_key[$sort_th];

#生成sql语句查询

$sql="select {$select_fields} from some_table where 1=1 {$another_where}";

$query=$this->sm_db->query($sql);

$total=$query->num_rows();

$sql="select {$select_fields} from some_table where 1=1 {$another_where} {$group_by} {$order_by} limit {$start},{$length}";

$query=$this->sm_db->query($sql);

$aaData=$query->result_array();

$output['sEcho'] = $sEcho;

$output['iTotalDisplayRecords'] = $total;

$output['iTotalRecords'] = $total; //总共有几条数据

$output['aaData'] = $aaData;

return $output;

}

3、最后是视图

我使用的是bootstrap样式框架

<!-- 新 Bootstrap 核心 CSS 文件 -->

<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap.min.css" />

<link rel="stylesheet" href="/resources/datatables/media/css/jquery.dataTables.css" />

<!-- 可选的Bootstrap主题文件（一般不用引入） -->

<link rel="stylesheet" href="/resources/bootstrap/css/bootstrap-theme.min.css">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

<script type="text/javascript" charset="utf-8" src="/resources/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript" charset="utf-8" src="/resources/datatables/media/js/jquery.dataTables.js"></script>

当然最前面要加载jquery.js的不然bootstrap没法使用

html代码：

<div id="main-content">

<div class="content-box">

<div class="content-box-header"><h3 style="margin: -5px 0 0">统计</h3></div>

<div class="content-box-content">

<div class="bs-example bs-example-tabs">

<ul role="tablist" class="nav nav-tabs" id="myTab">

<li class="active"><a data-toggle="tab" role="tab" href="#all">全部统计</a></li>

<li class=""><a data-toggle="tab" role="tab" href="#internal">国内</a></li>

<li class=""><a data-toggle="tab" role="tab" href="#overseas">国外</a></li>

</ul>

<div class="tab-content" id="myTabContent" style="display: block">

<br>

<div id="all" class="tab-pane fade active in">

<?php if(isset($all_table)) echo $bl_all_table;?>

<div class="clear"></div>

</div>

<div id="internal" class="tab-pane fade">

<?php if(isset($internal_table)) echo $bl_internal_table;?>

</div>

<div id="overseas" class="tab-pane fade">

<?php if(isset($overseas_table)) echo $bl_overseas_table;?>

</div>

</div>

</div>

</div>

</div>

</div>

javascript代码：

var show_fields='<?php if(isset($show_fields)) echo $show_fields;?>';

var files_array=show_fields.split(",");

var aoColumns=[];

$.each(files_array,function(key,val){

aoColumns.push({"mData": val});

});

var table_config={

"sPaginationType": "full_numbers", //分页风格，full_number会把所有页码显示出来（大概是，自己尝试）

"sDom":"<'row-fluid inboxHeader'<'span6'<'dt_actions'>l><'span6'f>r>t<'row-fluid inboxFooter'<'span6'i><'span6'p>>", //待补充

"iDisplayLength": 30,//每页显示10条数据

"bAutoWidth": true,//宽度是否自动，感觉不好使的时候关掉试试

"bLengthChange":false,

"bFilter": true,

"oLanguage": {//下面是一些汉语翻译

"sSearch": "搜索",

"sLengthMenu": "每页显示 _MENU_ 条记录",

"sZeroRecords": "没有检索到数据",

"sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条",

"sInfoFiltered": "(筛选自 _MAX_ 条数据)",

"sInfoEmtpy": "没有数据",

"sProcessing": "<img src='/resources/admin/images/loading.gif' />", //这里是给服务器发请求后到等待时间显示的 加载gif

"oPaginate":

{

"sFirst": "首页",

"sPrevious": "前一页",

"sNext": "后一页",

"sLast": "末页"

}

},

"bProcessing": true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好

"bServerSide": true, //开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。

"sAjaxSource": "", //给服务器发请求的url

"aoColumns":aoColumns,

"fnDrawCallback": function( oSettings ) {//加载新一页完成之后 调用方法

},

"fnRowCallback": function(nRow, aData, iDisplayIndex) {// 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的class风格

$('td:eq(0)', nRow).css({width:"60px"});

$('td:eq(1)', nRow).css({width:"300px"});

$('td:eq(2)', nRow).css({width:"60px"});

$('td:eq(3)', nRow).css({width:"60px"});

$('td:eq(4)', nRow).css({width:"120px"});

$('td:eq(5)', nRow).css({width:"60px"});

return nRow;

},

"fnInitComplete": function(oSettings, json) { //表格初始化完成后调用 在这里和服务器分页没关系可以忽略

$("input[aria-controls='all_table'],input[aria-controls='internal_table'],input[aria-controls='overseas_table']").attr("placeHolder", "搜索列默认显示关键字");

$(".dTable").css("width","100%");

var me_id=$(this).attr("id");

me_id=me_id.replace("_table","");

$("#myTab a[href='#"+me_id+"']").html($("#myTab a[href='#"+me_id+"']").html()+' <span class="badge">'+json.iTotalRecords+'</span>');

}

};

//全部列表

table_config.sAjaxSource="<?php echo base_url("aa/get_data_tables")?>";

$('#all_table').dataTable(table_config);

//国内爆料列表

table_config.sAjaxSource="<?php echo base_url("aa/get_data_tables")?>";

$('#internal_table').dataTable(table_config);

//国外海淘爆料列表

table_config.sAjaxSource="<?php echo base_url("aa/get_data_tables")?>";

$('#overseas_table').dataTable(table_config);

这次是生成了三个列表