当前位置： 移动技术网 > IT编程>开发语言>Jquery > datatable动态列处理，重绘表格(敲黑板，划重点！！！我肝了一天半才彻底弄懂这个东西，TAT)

datatable动态列处理，重绘表格(敲黑板，划重点！！！我肝了一天半才彻底弄懂这个东西，TAT)

2019年01月13日  | 移动技术网IT编程  | 我要评论

狩猎塔布羊,绿米联创,2月20日

                                                                  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或者为空，那么，恭喜你，你找到错误了，离成功也就不远啦。

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

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网