juqery datatables 为什么初始化时,数据会加载(或者说console.log)两次

时间:2022-08-25 21:00:03
$(function(){
    var n=0;
    var urlData="../data/test.txt";
    var tables;
    function creatDataTables(isSearch,dataJson){
        tables=$("#example2").DataTable({
            lengthChange:true,//是否允许改变每页显示数据数量
            serverSide:true,//开启服务器,数据由服务器处理
            processing:true,//载入数据的时候是否显示   “载入中” 提示
            pageLength:6, //每页加载的数据条数
            ordering:false,//是否开启排序   (排序操作在服务端进行,所有可以关了)
            pagingType:"simple_numbers",//分页按钮的显示方式
            autoWidth:true,//控制表格是否自适应宽度
            stateSave:false,
            searching:true,//禁止datatables本地搜索
            paging:false,
            language:{
                loadingRecords:"数据载入中...",
                emptyTable:"表中数据为空",
                info:"显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                infoEmpty:"无数据",
                infoFiltered:"由 _MAX_ 项过滤得到",
                infoPostFix:"",
                infoThousands:",",
                lengthMenu:"显示 _MENU_ 项结果",
                search:"搜索:",
                zeroRecords:"没有匹配结果",
                paging:{
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                },
                paginate:{
                    "previous": "上一页",
                    "next": "下一页",
                    "last": "尾页",
                    "first": "首页"
                },
            },
            "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +
            "t" +
            "<'row'<'col-xs-6'i><'col-xs-6'p>>",
            initComplete:function(){
                $("#mytool").append('<button id="datainit" type="button" class="btn btn-primary btn-sm">增加基础数据</button>&nbsp');
                $("#mytool").append('<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal">添加</button>');

            },
            footerCallback:function(tfoot,data,start,end,display){
                console.log(data);
                //$(tables.columns(4).footer()).html(
                //    tables.columns(4).data().reduce(function(a,b){
                //        console.log(typeof a);
                //        return parseInt(a)+parseInt(b);
                //    })
                //);
            },
            ajax:{
                url:urlData,
                contentType:"application/json",
                type:"POST",
                data:function(d){ //提交额外的参数或者修改参数
                    var x=JSON.stringify(d);
                    return x;
                },
                //dataSrc:function(data){
                //    console.log(data);
                //}
            },

            drawCallback:function(settings){
                alert('表格重绘了');
            },
            rowCallback:function(row,data){//打印出来N个data  N为数据个数
                //data为所有数据,row为每行的html
                console.dir(data);
                //if(data.age == "10000"){
                //    $(row).addClass('active').find("input").attr("checked",true);
                //}else{
                //    $(row).removeClass('active').find("input").attr("checked",false);
                //}
            },
            lengthMenu:[//一维或者二维数组   这个例子为二维数组,第一组为具体值,第二组是对第一组的描述文字并用来展示
                [2,5,-1],
                [2,5,"所有"]
            ],
            columns:[
                {
                    "data":"name",
                    "render":function(data,type,full,meta){
                        n=n+1;
                        console.log(n);
                        return '<input type="checkbox" class="checkboxes" value="'+data+'"/>';
                    },
                    "width":"13px"
                },{
                    "data":"name"
                },{
                    "data":"age"
                },{
                    "data":"height"
                },{
                    "data":"weight"
                },{
                    "data":null,
                    "width":"60px",
                    "defaultContent":"<div class='btn-group'>"+
                    "<button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i></button>"+
                    "<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i></button>"+
                    "</div>"
                }
            ],
            columnDefs:[
                {
                    targets:[0,-1],
                    orderable:false,
                    searchable:false
                }
            ]
        });
    }
    creatDataTables();
});


一共只有10个数据,但是 columns中的  render里面 可以console.log  两遍数据   也就是log出了20个数据

我看了一下执行顺序   先执行了columns  然后依次执行了rowCallback  footerCallback  drawCallback    最后又执行了一次columns

这是怎么回事 ,求大神解释

4 个解决方案

#1


随便来个人回复一下    我送分了   100分

#2


我来拿100分的,呵呵

#3


哥,我来晚了 juqery datatables 为什么初始化时,数据会加载(或者说console.log)两次,百度资料能不能给个链接

#4


楼主这个问题解决了吗?我也遇到了,很棘手,求指导

#1


随便来个人回复一下    我送分了   100分

#2


我来拿100分的,呵呵

#3


哥,我来晚了 juqery datatables 为什么初始化时,数据会加载(或者说console.log)两次,百度资料能不能给个链接

#4


楼主这个问题解决了吗?我也遇到了,很棘手,求指导