Как добавить функциональность кнопок копирования, печати, Excel на угловых 4 датированных с использованием углового способа - PullRequest
0 голосов
/ 02 ноября 2018

Я использовал угловые данные 4, я хочу добавить функциональность печати, экспортировать и копировать в Excel, используя угловой способ. Я добавил, но это не работает. Как добавить вышеуказанную функциональность, я использовал официальный документ, пожалуйста, помогите мне

https://l -lin.github.io / угловатая-DataTables / # / удлинители / кнопка

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"        
      ],
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...