Aurelia:使用DataTables jQuery插件时数据在表中消失 [英] Aurelia: data disappears in table when using DataTables jquery plugin

问题描述

我使用jQuery数据表插件( https://datatables.net/).

I use the jQuery data tables plugin (https://datatables.net/).

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

You can use it on a html table like this:

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

如果我的View中有一个普通的html表，并在我的视图模型的attached()方法中调用以上内容，则一切正常.

If I have a normal html table in my View and call the above in the attached() method of my view model all works fine.

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

But things go wrong when I try to do this when generating the table from data I get from my API.

将生成该表，但是在其下而不是说显示0到0，共93个条目"，而是显示显示0到0，共0个条目".另外，如果我尝试按给定的列对表进行排序，则所有数据都会消失，仅保留列标题.

The table gets generated but under it instead of saying something like "showing 0 to 10 of 93 entries" it says "showing 0 to 0 of 0 entries". Also, if I try to sort the table by a given column all the data disappears leaving just the column headers.

更新: 我不使用任何Ajax调用来对表进行排序.我从服务器获取的数据创建表.详细说明:我从服务器获取一个json对象.使用json对象使用"repeat.for ='tableData的行'"构造表.在附加的挂钩中调用.DataTable()会产生问题.我尝试创建一个简单的按钮，当单击该按钮时调用.DataTable()方法.它可以正确构造表.似乎在Attached()挂钩中调用它存在问题

UPDATE: I do not use any Ajax calls for sorting the table. I create my table from the data I get from my server. To elaborate: I get a json object from server. Use the json object to construct the table using "repeat.for='row of tableData' ". Calling the .DataTable() in attached hook creates the issue. I have tried creating a simple button that calls the .DataTable() method when clicked. It constructs the table properly. Seems like an issue with calling it in the attached() hook

推荐答案

我同意MJ，但您可能会因为计时问题而犯规.

I agree with MJ, but you may be falling foul of timing issues.

Aurelia使用异步绑定系统，该系统将DOM更新排队到微任务队列中，以便出于性能原因进行批处理(这就是为什么这么快)

Aurelia uses an async binding system which queues DOM updates to the micro task queue in order to batch them for performance reasons (that's why it's so quick)

您可以尝试以下操作，从理论上讲，该操作应允许在初始化数据表之前处理所有重复绑定.

You could try the following which should in theory allow any repeat bindings to be processed before your data tables are initialised.

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
    });
  }
}

这篇关于Aurelia:使用DataTables jQuery插件时数据在表中消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！