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_ 条 &nbsp;&nbsp;共 _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);

这次是生成了三个列表