使用 aurelia 更新数据的 DataTable 插件

Question

我在 Aurelia 中使用 DataTables and DatePicker 插件。我基本上希望用户 select 一个日期并让数据 table 呈现该日期的数据，但是对于我当前的代码，一旦数据 table 似乎存在问题变化。一旦数据发生变化，datatable 插件的格式就会消失，并且排序、滚动按钮不起作用。我尝试在 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();

使用 aurelia 更新数据的 DataTable 插件

DataTable plugin using aurelia updating data

html

javascript

jquery

datatables

aurelia