2016-05-30 38 views
0

我使用jQuery数据表插件(https://datatables.net/)。在我看来Aurelia:使用DataTable时数据在表中消失jquery插件

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

如果我有一个正常的HTML表,并调用上面在我看来模型的attached()方法一切工作正常:

您可以使用它在一个HTML表这样。

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

该表得到生成,但在它下面,而不是像“显示93个条目中的0到10”之类的内容,它表示“显示0条目的0到0”。此外,如果我尝试按给定列对表格进行排序,则所有数据都将消失,只留下列标题。

更新: 我不使用任何Ajax调用来排序表。我从我从服务器获得的数据创建我的表格。详细说明:我从服务器获取json对象。使用json对象使用tableData'“的”repeat.for ='行构建表。在连接的钩子中调用.DataTable()会产生问题。我试图创建一个简单的按钮,单击时调用.DataTable()方法。它适当地构建表格。看起来像在挂接()挂钩中调用它的问题

+1

什么是jQuery? –

+0

当你有aurelia绑定时,我没有看到使用数据表的多少意义。我宁愿使用'repeat.for'来生成行。您可以使用Aurelia构建Datables的任何功能。这只是我的意见 –

+0

我使用repeat.for来生成我的表格。 Datables用于实时搜索,表格分页。我可以构建它,但是这里的问题是为什么它不能正常工作 –

回答

0

您将要为您的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什么。它可能没有被设计来处理来自服务器的新数据。我会把它留给读者。

+0

我没有使用任何Ajax调用来对表进行排序。我从我从服务器获得的数据创建我的表格。详细说明: –

+0

问题已更新 –

2

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

问题依然存在。我的问题不是数据没有显示在表格中。它是。但是,例如,下面有一个消息“表中没有可用的数据”,但数据在那里。但第二个我尝试对列进行排序或搜索所有数据消失。任何其他建议? –

+0

对不起,我敢肯定,我已经有这个工作正常,这里有一个想法,你有任何自定义元素标签,你自己关闭?所有非标准的HTML标签都必须有一个明确的结束标签,并且不能自动关闭,这可能会导致奇怪的行为 – Charleh

+0

还要检查您是否正确创建了add和tbody,因为我认为数据表在挑选DOM时看起来像是什么样子表格 – Charleh

相关问题