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

http://blog.csdn.net/kingsix7/article/details/38928685

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);

这次是生成了三个列表