Aurelia: данные исчезают в таблице при использовании плагина jQuery DataTables

Question

Я использую плагин таблиц данных jQuery (https://datatables.net/).

Вы можете использовать его на HTML таблицу, как это:

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

Если у меня есть нормальный HTML таблицу на мой взгляд, и вызвать выше в attached() методе моей точки зрения модели все работает отлично.

Но все идет не так, когда я пытаюсь сделать это, создавая таблицу из данных, которые я получаю из своего API.

Таблица генерируется, но под ней вместо того, чтобы говорить что-то вроде «показ от 0 до 10 из 93 записей», он говорит «показ от 0 до 0 из 0 записей». Кроме того, если я попытаюсь отсортировать таблицу по данному столбцу, все данные исчезнут, оставив только заголовки столбцов.

UPDATE: Я не использую никаких вызовов Ajax для сортировки таблицы. Я создаю таблицу из данных, которые я получаю с моего сервера. Чтобы уточнить: я получаю объект json с сервера. Используйте объект json для построения таблицы с помощью строки «repeat.for =» таблицыData ». Вызов .DataTable() в прикрепленном крючке создает проблему. Я попытался создать простую кнопку, которая вызывает метод .DataTable() при нажатии. Он правильно строит таблицу. Кажется, проблема связана с вызовом в прикрепленном() hook

Answer 1

Вы должны создать custom element для своего объекта DataTable. Скорее всего, вы захотите использовать custom binding в элементе DataTable, где вы передаете данные. Наконец, вы захотите вызвать какую-то функцию обновления или разрыва/наращивания в вашем плагине DataTable в обратном вызове «valueChanged» привязки rows.

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. Возможно, он не предназначен для обработки новых данных, поступающих с сервера. Я оставлю это читателю.

Answer 2

Я согласен с МЮ, но вы можете падать в фокусе проблем с синхронизацией.

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