梦里一米七八 阅读(6) 评论(0)

                                                                  datatable动态列处理,重绘表格

       前言:至于动态列的绘画,我前面博客已经写过了,就是动态列的配置问题,不懂的去我博客看下,今天要写的呢,就是你已经写了一个动态列在datatable,现在你想重新绘制一遍这个表格,而且也是动态列的,里面有很多细节需要注意。

         首先,说一下动态列的配置,就是要在datatable配置下修改columns和data,代码如下。

 1 var aaa.datatable = $('#aaa').DataTable({
 2             'language': lan,
 3             "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
 4             "paging": true,
 5             "lengthChange": true,
 6             "info": true,
 7             'destroy': true,
 8             "deferRender": true,
 9             'columns': this.data.col_define,
10             'data': this.data.rowdata,
11         })

          culumns里的this.data.col_define列定义是后台返回的data数据下有个col_define列表,列表下放着targets(列,从0开始),data(对应data下的键key),title(列名或者叫做列标题),

   data里的this.data.rowdata行数据定义是后台返回的data数据下有个rowdata列表,列表下放着每一行的键值对数据,每行用字典封装。其他的都是datatable的基本配置,想要修改成想要的其他控件可以看官网修改。

然后,就是绘制完表格怎么清表格了,搜索了官网和很多其他博客,大概思路就是用destroy,clear,empty。

 

        这里要分别解释三个功能,第一是destroy()方法,是破坏整个表格结构,clear是清除放入的数据,需要注意的是,有人会问只用destroy不行吗,当然不行啊,因为之前列定义和行数据的放入,里面已经有数据了,你destroy只是清除了表格的结构,数据还在的,所以就会导致你的数据并没有真正清除完,还有就是empty方法,这个是用来清空datable的,这个清空,和前面两种不用,这个是清楚整个div的,所以用法也不一样,在这里我就饶了半天弯路,后面封装对象起来就容易很多了

记住,destroy和clear是datatable清除的,empty是div清除的.

       举个例子:

var table1=$('#aaa');
var int_table1=$('#aaa').Datatable();
int_table1.destroy();
int_table1.clear();
table1.empty();

        那么,接下来就是,把这些清除表格的方法封装到render函数即可。

 render(table) {
        table.clear();
        table.destroy();
    }

       这里需要提醒的是,把empty给拿出来,到时候具体重绘的时候再指定div去清除。还有这里的table,指的就是上面说的某div的datatable()。

结合起来,你需要封装的对象就出来了。

class Object {
    constructor(table) {
        this.data = {};
        this.table=table;
    }
    init(table1) {
        return this.table=table1.DataTable({
            'language': lan,
            "dom": 'lB<"top"f><"toolbar">rt<"bottom"ip><"clear">',
            "paging": true,
            "lengthChange": true,
            "info": true,
            'destroy': true,
            "deferRender": true,
            'columns': this.data.col_define,
            'data': this.data.rowdata,
        })
    }
    render(table){
        table.clear();
        table.destroy();
    }
}

        这里你会发现,我把这里的table1给标红了,为什么呢,因为我在这里摔惨了2333333.这里的table1指的就是前面提到的$('aaa'),所以不要多次一举的把table1.Datatable写成$(table1).Datatable。能做到这里,已经说明你的思路已经非常完善了,说明你已经成功了一半,下面就是AJAX的数据交互。

         对了,在AJAX之前,你要先声明好你的对象。

table=$('#aaa');
int_table=$('#aaa').Datatable();
obj=new Object(table);
  $.ajax({
        type: 'POST',
        url: '/url',
        async: true,
        cache: false,
        data: {},
        dataType: 'json',
        beforeSend: function () {
        },
        success: function (res) {
            if ('ok' === res['code']) {
                obj.render(int_table);
                table.empty();
                console.log(table);
                obj.data = res['data'];
                obj.init(table);
                console.log(table);
            } else {
                alert('失败' + res['msg']);
            }
        },
        complete: function () {

        },
        error: function (jqXHR, textStatus, errorThrown) {
            var e = JSON.parse(jqXHR.responseText);
            console.log('失败'+e['msg']);
        }
    });

       当然,能够完成到这里,你已经很厉害了,因为你可以自定义列,然后重绘,再自定义列,封装起来的函数以后也可以接着用。

      但是,我就算完成到了这一步,我在另一个地方重绘表格的地方,居然还是报错了,找了很久,反复校对了很多遍,终于给我找到错误了,就是一开始那个datatable我没有初始化,导致我清除和赋值的时候出现了问题。

       所以,大家在用datatable的时候,一定要记得初始化表格。

$('#aaa').Datatable(opts);

       opts里面的配置正常写就行,反正是初始化的,到时候你重绘表格的时候就会清除掉这个初始化表格。(重绘表头和行的就讲到这里了,不懂可以在下方提问,思路应该挺清晰的了)

这里我再附带一个TIP,如果你只是重绘数据,表头不换,那么你就可以用到下面这个render函数,这也是我一开始接触的只清除数据不清除表头的方法。

render(table) {
        var currentPage = table.page();
        table.clear();
        table.rows.add(this.staff_list);
        table.page(currentPage).draw(false);
    }

        这个用来更新数据就很爽了,或者你用window.location.reload来更新整个页面,重新获取后台的数据初始化表格来刷新页面。其他的单纯刷新datatable方法也有就是table.draw(false)。不过这个会默认翻到第一页,所以我这里才会还有一个table.page();

        工作经验:前端报错一定不要着急,看控制台报的什么错,再看前后端数据交互是否传送了正确的数据,如果没错,那就硬肝前端的错吧,datatable出现的大多数错误都是行列没对准这些错误,其实有时候并不是后端的错,可能多数都是前端绘制表格的时候出错了,关键就是找清除你自己写的代码的每一步,必要时多console.log一下,看下是否每一步都是你想要的结果,偶尔会出现undefined或者为空,那么,恭喜你,你找到错误了,离成功也就不远啦。

(前端实习的临近一个月,加油继续肝,最近的梗,是("盘"给我),我也觉得怪怪的,最近喜欢的歌,(小了白了兔,锤子之歌),都很魔性,哈哈哈哈哈哈哈哈哈哈哈哈哈嗝!)