Aurelia：使用DataTables jquery插件时，数据在表中消失

我使用jQuery数据表插件（）

您可以在html表上使用它，如下所示：

$("#table").DataTable();

如果我的视图中有一个普通的html表，并在视图模型的

attached（）

方法中调用上述内容，那么一切都可以正常工作

但是，当我试图从API获取的数据生成表时，出现了问题

该表被生成，但在它下面没有说“显示93个条目中的0到10个”，而是说“显示0个条目中的0到0个”。此外，如果我尝试按给定列对表进行排序，所有数据都会消失，只留下列标题

更新：

---

我不使用任何Ajax调用对表进行排序。我根据从服务器获取的数据创建表。详细说明：我从服务器获取一个json对象。使用json对象使用“repeat.for='row of tableData'”构造表。调用附加钩子中的.DataTable（）会产生问题。我尝试过创建一个简单的按钮，在单击时调用.DataTable（）方法。它正确地构造了表。在attached（）hook中调用它似乎有问题，您需要为DataTable对象创建一个。您很可能希望在传递数据的DataTable元素上使用。最后，您需要在

行

绑定的“valueChanged”回调中调用DataTable插件上的某种刷新或拆卸/构建函数

dataTable.js

@inject(Element)
export class DataTableCustomElement { 

    element;
    @bindable rows;

    constructor(Element) {
        this.element = $(Element);
    }

    rowsChanged(newValue, oldValue) {
        this.element.DataTable.refresh(); // or whatever it is
    } 
}

view.html

<data-table rows.bind="data.rows"></data-table>

---

我对你的DataTableAPI一无所知。它可能不是为处理来自服务器的新数据而设计的。我将把它留给读者。

您将要为DataTable对象创建一个。您很可能希望在传递数据的DataTable元素上使用。最后，您需要在

行

绑定的“valueChanged”回调中调用DataTable插件上的某种刷新或拆卸/构建函数

dataTable.js

@inject(Element)
export class DataTableCustomElement { 

    element;
    @bindable rows;

    constructor(Element) {
        this.element = $(Element);
    }

    rowsChanged(newValue, oldValue) {
        this.element.DataTable.refresh(); // or whatever it is
    } 
}

view.html

<data-table rows.bind="data.rows"></data-table>

---

我对你的DataTableAPI一无所知。它可能不是为处理来自服务器的新数据而设计的。我将把这个问题留给读者。

我同意MJ的观点，但你可能会因为时间问题而受到影响

Aurelia使用一个异步绑定系统，它将DOM更新排队到微任务队列，以便出于性能原因对它们进行批处理（这就是为什么它这么快的原因）

您可以尝试以下方法，从理论上讲，这些方法应该允许在初始化数据表之前处理任何重复绑定

import {TaskQueue} from 'aurelia-framework';

@inject(Element, TaskQueue)
export class DataTables {  
  constructor(element, taskQueue) {
    this.element = element;
    this.taskQueue = taskQueue;
  }

  attached() {
    this.taskQueue.queueMicroTask(() => {
      // Init data tables here
    });
  }
}

---

我同意MJ的观点，但你可能会因为时间问题而犯规

Aurelia使用一个异步绑定系统，它将DOM更新排队到微任务队列，以便出于性能原因对它们进行批处理（这就是为什么它这么快的原因）

您可以尝试以下方法，从理论上讲，这些方法应该允许在初始化数据表之前处理任何重复绑定

import {TaskQueue} from 'aurelia-framework';

@inject(Element, TaskQueue)
export class DataTables {  
  constructor(element, taskQueue) {
    this.element = element;
    this.taskQueue = taskQueue;
  }

  attached() {
    this.taskQueue.queueMicroTask(() => {
      // Init data tables here
    });
  }
}

---

---

我不使用任何Ajax调用对表进行排序。我根据从服务器获取的数据创建表。详细说明：我不使用任何Ajax调用对表进行排序。我根据从服务器获取的数据创建表。详细说明：当您使用aurelia绑定时，我看不出使用datatables有多大意义。我宁愿使用

repeat.for

来生成行。您可以使用Aurelia构建数据库的任何功能。这只是我的观点我使用repeat.for生成表。数据库用于实时搜索、表格分页。当然，我可以构建它，但这里的问题是为什么它不能正常工作这可能是一个时间问题，aurelia使用异步绑定，请在附加的方法中使用setTimeout（使用几秒钟的延迟）进行尝试。如果它有效，那是因为您正在等待异步绑定进行评估。解决这个问题的最常见方法是在任务队列中对任务进行排队，以便在管道中等待任何绑定后执行任务。我认为在使用aurelia绑定时使用datatables没有多大意义。我宁愿使用

repeat.for

来生成行。您可以使用Aurelia构建数据库的任何功能。这只是我的观点我使用repeat.for生成表。数据库用于实时搜索、表格分页。当然，我可以构建它，但这里的问题是为什么它不能正常工作这可能是一个时间问题，aurelia使用异步绑定，请在附加的方法中使用setTimeout（使用几秒钟的延迟）进行尝试。如果它有效，那是因为您正在等待异步绑定进行评估。解决此问题的最常见方法是在任务队列中对任务进行排队，以便在管道中等待的任何绑定问题持续出现后执行任务。我的问题不是数据没有显示在表中。它是。但是，例如，下面有一条消息“表中没有可用数据”，但数据在那里。但当我第二次尝试对一列进行排序或搜索时，所有数据都消失了。还有其他建议吗？啊，对不起，我相信我已经很好地完成了，这里有一个想法，你有任何自定义元素标记，你已经自我关闭了吗？所有非标准HTML标记都必须有一个明确的结束标记，并且不能自动结束，这可能会导致奇怪的行为。此外，请检查您是否正确创建了thead和tbody，因为我认为数据表在创建tableChecked之前对DOM的外观很挑剔。我不使用任何自定义元素。只是删除了repeat.for代码，并将其替换为普通表。表是否正确生成。我想这就像你说的，有一个时间问题。没有使用内置的js

setTimeout

方法，它会在一个你可以指定的延迟后启动一个回调函数，用谷歌搜索它并尝试（延迟几秒）这个问题仍然存在。我的问题不是数据没有显示在表中。它是。但是，例如，下面有一条消息“表中没有可用数据”，但是