将滚动条扩展导入角应用程序并将其用作选项属性

时间:2019-02-28 12:34:41

标签: angular datatables-1.10

我正在使用智能管理角度版本,在该版本中,我只需要在组件和html之类的指令中定义数据表选项。

组件

  dtOptions = {
    sDom: 'rt<"bottom"p>',
    pageLength: 10,
    serverSide: true,
    processing: true,
    ajax: (dataTablesParameters: any, callback) => {
      console.log(dataTablesParameters);
      this.http
        .post(
          'https://angular-datatables-demo-server.herokuapp.com/', dataTablesParameters, {}
        ).subscribe(( resp : any) => {
          resp = resp.json();
          console.log(resp);
          callback({
            recordsTotal: resp.recordsTotal,
            recordsFiltered: resp.recordsFiltered,
            data: resp.data
          });
        });
    },
    columns: [  
      { data: "id" },
      { data: "firstName" },
      { data: "lastName" }
    ],
  };

并将这些选项传递到模板

<sa-datatable [options]="dtOptions" tableClass="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>
        </tr>
    </thead>
</sa-datatable>

有一个名为Scroller的数据表扩展/插件,我想在我的角度应用程序中使用它。 到目前为止,我是使用NPM安装的

npm i datatables.net-scroller

然后将其导入到我的组件类中。

导入'datatables.net-scroller';

然后将其用作选项中的属性

dtOptions = {
        sDom: 'rt<"bottom">',
        serverSide: true,
        ajax: (dataTablesParameters: any, callback) => {
          console.log(dataTablesParameters);
          this.http
            .post(
              'https://angular-datatables-demo-server.herokuapp.com/', dataTablesParameters, {}
            ).subscribe(( resp : any) => {
              resp = resp.json();
              console.log(resp);
              callback({
                recordsTotal: resp.recordsTotal,
                recordsFiltered: resp.recordsFiltered,
                data: resp.data
              });
            });
        },
        columns: [  
          { data: "id" },
          { data: "firstName" },
          { data: "lastName" }
        ],
        scrollY: 200,
          deferRender: true,
          scroller: {
             loadingIndicator: true
          }
};

但是对我没用。我也尝试过这样导入

import { scroller } from 'datatables.net-scroller'

然后使用了它,但没有任何改变。需要帮助。

0 个答案:

没有答案