Question

我在Aurelia中使用DataTables和DatePicker插件。我基本上希望用户选择一个日期，并让数据表呈现该日期的数据，但是使用我当前的代码，一旦数据更改，数据表似乎就会出现问题。数据更改后，datatable插件上的格式似乎已关闭，并且排序，滚动按钮不起作用。我尝试在jsfiddle上添加datepicker，但是我没有运气，因为您必须在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使用data参数。

$('#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插件

1 个答案: