Question

我使用jQuery数据表插件（https://datatables.net/）。

你可以在像这样的html表上使用它：

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

如果我的视图中有一个普通的html表，并且在我的视图模型的attached()方法中调用上面的方法，那么一切正常。

但是当我从我从API获取的数据生成表时，我尝试这样做会出错。

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

更新：我不使用任何Ajax调用来对表进行排序。我从我从服务器获得的数据创建表。详细说明：我从服务器获取了一个json对象。使用＆＃34; repeat.for =＆＃39; tableData＆＃39;行使用json对象构造表。＆＃34 ;.在附加挂钩中调用.DataTable（）会产生问题。我尝试创建一个简单的按钮，单击时调用.DataTable（）方法。它正确地构造了表。似乎是在附加（）钩子中调用它的问题

Answer 1

我同意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
    });
  }
}

Answer 2

您将要为DataTable对象创建custom element。您很可能希望在传递数据的DataTable元素上使用custom binding。最后，您将要在rows绑定的“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>

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

Aurelia：当使用DataTables jquery插件

2 个答案: