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

最新推荐文章于 2024-08-10 08:43:33 发布

wxmvp009

最新推荐文章于 2024-08-10 08:43:33 发布

阅读量2.8k

点赞数

分类专栏： angular datatables 文章标签： angular datatables Cannot reinitialise DataTable 表头排序自定义

本文链接：https://blog.csdn.net/wxmvp009/article/details/80004378

版权

本文介绍了在Angular4项目中使用Datatables实现自定义表头排序和数据刷新，解决`Cannot reinitialise DataTable`警告的方法。通过配置dtOptions实现特定列排序，并通过设置`destroy: true`或`retrieve: true`避免重新初始化错误。同时，通过调用`table.reloadData()`实现实时数据更新。

摘要由CSDN通过智能技术生成

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':      '首页',
            </