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'  => '

' );
        $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样式框架









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

html代码:


   

       

统计


       

           

               
               

                   

                   

                       
                       

                   

                   

                       
                   

                   

                       
                   

               

           

       

   


javascript代码:

var 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": "", //这里是给服务器发请求后到等待时间显示的 加载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()+'  '+json.iTotalRecords+'');
        }
    };
    //全部列表
    table_config.sAjaxSource="";
    $('#all_table').dataTable(table_config);
    //国内爆料列表
    table_config.sAjaxSource="";
    $('#internal_table').dataTable(table_config);
    //国外海淘爆料列表
    table_config.sAjaxSource="";
    $('#overseas_table').dataTable(table_config);


这次是生成了三个列表

jquery之datatable.js与CI整合 异步加载(大数据量处理)_第1张图片



你可能感兴趣的:(jquery之datatable.js与CI整合 异步加载(大数据量处理))