如何使用Angular方式在Angular 4数据表上添加复制,打印,Excel按钮的功能

时间:2018-11-02 09:23:15

标签: html angular datatable

我使用了angular 4数据表,我想添加打印功能,excel导出和使用angular方法进行复制。我添加了但不起作用。如何添加上述功能我已经使用了官方文档,请帮帮我

https://l-lin.github.io/angular-datatables/#/extensions/buttons

app.module.ts

    dtOptions: any = {};
    ngOnInit() {
         this.dtOptions = { 
            pagingType: 'full_numbers',
            pageLength: 50,
            serverSide: true,
            processing: true,
            dom: 'Bfrtip',
            buttons: [
              'copy',
              'print',
              'excel'
            ],
            ajax: (dataTablesParameters: any, callback) => {
              //get data from api call
              this.commonService.getCarsLarge(dataTablesParameters).subscribe(resp => { 
                this.srNo=dataTablesParameters.start;
                console.log(dataTablesParameters.start) 
                let responseData:any=resp;
                this.requestForDemoObj=responseData.data;              
                callback({
                    recordsTotal:responseData.totalRecord,
                    recordsFiltered:responseData.totalRecord ,
                    data: []
                  });
                });
                //get data from api call
            },        
            columns: [{ data: 'request_demo_id' }, { data: 'user_name' }, { data: 'email' }],
          };

      }

app.component.html

<table datatable [dtOptions]="dtOptions" class="table table-striped" width="100%">
                    <thead>
                      <tr class="table_header">
                          <th>Sr No.</th>
                          <th>Brand Name</th>
                          <th>Tractor</th>
                          <th>User Name</th>
                          <th>Mobile No</th>
                          <th>Email</th>
                          <th>State</th>
                          <th>City</th>
                          <th>Requested Date</th>
                          <th>Option</th>
                      </tr>
                    </thead>
                    <tbody *ngIf="requestForDemoObj?.length != 0">
                      <tr *ngFor="let person of requestForDemoObj; let i = index;" >
                          <td>{{ (i+srNo)+(1) }}</td>
                          <td>{{ person.user_name }}</td>
                          <td>{{ person.user_name }}</td>
                          <td>{{ person.user_name }}</td>
                          <td>{{ person.mobile }}</td>
                          <td>{{ person.email }}</td>
                          <td>{{ person.state }}</td>
                          <td>{{ person.city }}</td>
                          <td>{{ person.created_date }}</td>
                          <td>Add / Edit</td>
                      </tr>
                  </tbody>
                  <tbody *ngIf="requestForDemoObj?.length == 0">
                    <tr>
                      <td colspan="3" class="no-data-available">No data!</td>
                    </tr>
                  <tbody>
              </table>

angular.cli.json

"styles": [ 
        "styles.css",
        "assets/admin/css/bootstrap-min.css",          
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "assets/admin/css/admin-khetigaadi.css",        
        "../node_modules/font-awesome/css/font-awesome.min.css",
        "assets/admin/css/admin.min.css",    
        "../node_modules/datatables.net-dt/css/jquery.dataTables.css",
        "../node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
        "../node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "../node_modules/datatables.net/js/jquery.dataTables.js",
        "../node_modules/jszip/dist/jszip.js",
        "../node_modules/datatables.net-buttons/js/dataTables.buttons.js",
        "../node_modules/datatables.net-buttons/js/buttons.colVis.js",
        "../node_modules/datatables.net-buttons/js/buttons.flash.js",
        "../node_modules/datatables.net-buttons/js/buttons.html5.js",
        "../node_modules/datatables.net-buttons/js/buttons.print.js",
        "assets/admin/js/jquery.slimscroll.min.js",
        "assets/admin/js/app.min.js"        
      ],

0 个答案:

没有答案