Angular4 + Datatables 实现自定义表头排序和数据刷新(解决Warning: Cannot reinitialise DataTable)

Angular4 + Datatables 实现自定义表头排序和数据刷新(解决Warning: Cannot reinitialise DataTable)

继续在做网盘项目，最近开发前端文件和目录显示的功能，需要增加对查询数据的列表进行表头排序和文件名搜索功能。

在网上找了多种解决方案，最后决定采用datatables插件来解决表头排序的需求。

datatables简介：Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

官网：https://datatables.net/

中文官方网站：http://www.datatables.club/

了解了一下基本信息后开始工作，项目所用的前端框架为angular4，参照datatables的例子（http://l-lin.github.io/angular-datatables/#/basic/angular-way），实现了网盘项目的表头排序。但是默认情况下是所有列都进行了表头排序。

因此，继续挖掘datatables的使用方式，发现可以通过dtOptions的配置来实现自定义表头排序，

this.dtOptions = {
    pagingType: 'full_numbers',
    order: [[2, 'desc']],  //实现自定义的排序的要点1
    lengthChange: false,  
    info: false,
    language: {     //语言设置
        'paginate': {
            'first':      '首页',
            'last':       '末页',
            'next':       '下一页',
            'previous':   '上一页'
        },
        'zeroRecords':    '没有查询到匹配的数据',
        'search': '搜索',
        'emptyTable':     '当前文件夹为空',
    },
    columns: [            //实现自定义的排序的要点2，可以自定义那一列才有排序功能      
        { orderable: false },
        { orderable: false },
        null,
        { orderable: false },
        { orderable: false },
    ]
};

如上，实现了table自定义列的表头排序。

可是，又出现了新问题…… 当我们在表里面新增或者删除数据后，页面会报错：Warning: Cannot reinitialise DataTable,

官网的解决方案：https://datatables.net/manual/tech-notes/3。另外，在网上找了n多资料，基本都是基于angularjs 或者ajax的解决方案，几乎没有关于angular4的。但是有一个解决思路是可以设置

destroy：true或retrieve：true来解决报错问题，于是有了下面的代码：

this.dtOptions = {
    pagingType: 'full_numbers',
    order: [[2, 'desc']],
    destroy: true,  //解决Cannot reinitialise DataTable
    lengthChange: false,
    info: false,
    language: {
        'paginate': {
            'first':      '首页',
            'last':       '末页',
            'next':       '下一页',
            'previous':   '上一页'
        },
        'zeroRecords':    '没有查询到匹配的数据',
        'search': '搜索',
        'emptyTable':     '当前文件夹为空',
        // 'info':           '共 _TOTAL_ ',
    },
    columns: [
        { orderable: false },
        { orderable: false },
        null,
        { orderable: false },
        { orderable: false },
    ]
};

如上代码，现在table新增或删除数据后不会有Cannot reinitialise DataTable报错了，但是页面没有刷新，数据仍然是原来的，需要手动reload页面才会生效。

尝试找datatables的刷新功能，无果。结果发现自己傻x，直接用

window.location.reload();

不就行了么？ 在create和delete前端页面方法后面增加reload。问题解决。

希望对同样使用angular4+datatables的朋友有一些帮助和启发。

谢谢