2016-05-30 53 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

相關問題