Плагин DataTable, использующий обновление данных aurelia

Question

Я использую плагины DataTables и DatePicker с Aurelia.По сути, я хочу, чтобы пользователь выбрал дату и чтобы таблица данных отображала данные за эту дату, но с моим текущим кодом, похоже, возникает проблема с датируемыми данными после изменения данных.Как только данные изменяются, форматирование подключаемого модуля с данными может отключиться, и кнопки прокрутки сортировки не работают.Я попытался добавить указатель даты в jsfiddle, но мне не повезло, так как вам нужно добавить некоторую конфигурацию в package.json, и я не могу понять это.Если бы кто-нибудь мог дать какие-либо советы, я был бы очень признателен.Дайте мне знать, если у вас есть какие-либо вопросы

 pickerChanged() {
    this.picker.events.onChange = (e) => {
      this.data = [];
      let inputDate = new Date(e.date.format('YYYY-MM-DD') + ' 00:00');
      let data = (demoData as any).default;
      for (let row of data) {
        let rowDate = new Date((row as any).date);
        if (inputDate.getTime() >= rowDate.getTime()) {
          this.data.push(row);
        }
      }
      console.log(4444, this.data);
        $(document).ready(function() {
          $('#dataTable').DataTable( {
            "scrollY": "280px",
            "scrollCollapse": true,
            "paging":false,
            "searching": false,
            "info": false,
            "language": {
              "emptyTable": " "
            }
          } );
        } );
    };
  }

<abp-datetime-picker element.bind="picker"></abp-datetime-picker>

<div class="row pt-2">
        <div class="col-12">
          <table class="table" id="dataTable">
            <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Receipt #</th>
              <th>Invoice number</th>
              <th>Date</th>
              <th>Total</th>
              <th>Balance</th>
              <th>Payment</th>
            </tr>
            </thead>
            <tbody>
            <tr repeat.for="row of data">
              <td>${row.id}</td>
              <td>${row.name}</td>
              <td>${row.receiptNumber}</td>
              <td>${row.invoiceNumber}</td>
              <td>${row.date}</td>
              <td>${row.total}</td>
              <td>${row.balance}</td>
              <td>${row.payment}</td>
            </tr>
            </tbody>
          </table>
          <div class="text-center" if.bind="!data.length">No records available. Please select a valid date</div>
        </div>
      </div>

Answer 1

После нескольких часов изучения проблемы я наконец понял это.Проблема с моим старым кодом заключалась в том, что я передавал данные в таблицу данных, используя, например, $ {row.id} вместо того, чтобы использовать параметр данных с данными, как показано ниже.

$('#dataTable').DataTable({
        data: this.data,
        columns: [
          { data: 'id' },
          { data: 'name' },
          { data: 'receiptNumber' },
          { data: 'invoiceNumber' },
          { data: 'date' },
          { data: 'total' },
          { data: 'balance' },
          { data: 'payment' },
        ]
      });

<div class="row pt-2">
        <div class="col-12">
          <table class="table" id="dataTable">
            <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Receipt #</th>
              <th>Invoice number</th>
              <th>Date</th>
              <th>Total</th>
              <th>Balance</th>
              <th>Payment</th>
            </tr>
            </thead>
          </table>
        </div>
      </div>

, а затем вызывать эту функцию всякий раз, когда вы хотите обновить свои данные

$('#dataTable').DataTable().clear().rows.add(this.data).draw();