标签: angular-datatables

我从https://l-lin.github.io/angular-datatables/#/getting-started安装数据表角度指令

从https://l-lin.github.io/angular-datatables/#/extensions/buttons安装数据表按钮扩展

angular.json

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.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"
            ]
          },

包.json

 "dependencies": {
    "@angular/animations": "6.0.7",
    "@angular/common": "6.0.7",
    "@angular/compiler": "6.0.7",
    "@angular/core": "6.0.7",
    "@angular/forms": "6.0.7",
    "@angular/http": "6.0.7",
    "@angular/platform-browser": "6.0.7",
    "@angular/platform-browser-dynamic": "6.0.7",
    "@angular/platform-server": "6.0.7",
    "@angular/router": "6.0.7",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "angular-datatables": "^6.0.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "datatables.net": "^1.10.19",
    "datatables.net-buttons": "^1.5.3",
    "datatables.net-buttons-dt": "^1.5.3",
    "datatables.net-dt": "^1.10.19",
    "jquery": "^3.3.1",
    "jszip": "^3.1.5",
    "rxjs": "^6.2.1",
    "zone.js": "^0.8.26"
  },

当我运行这个项目然后返回这样的错误：在此处输入图像描述

未捕获的类型错误：无法读取 button.flash.js 中未定义的属性“版本”

有一个使用角度数据表的项目。现在我需要从包含此类表的页面中删除“显示 N 个条目”下拉列表，但保持分页不变。现在我找到了这种方法 -

withOption('paging', false)

但这同时删除了两者！

谁能告诉我比手动从 DOM 中删除它们更好的方法吗？

我正在使用AngularJS和angular-datatable，并且想连续处理该事件，我已经设置了控制器来侦听该事件，但是它不起作用。我的代码是：

html

<div  class="panel panel-flat">
    <div class="panel-heading">
        <h6 class="panel-title">Planilla</h6>
    </div>
    <div class="panel-heading"> 
    <table class="table datatable-basic table-hover" datatable="ng" dt-options="empleadoList.dtOptions"  dt-column-defs="empleadoList.dtColumnDefs" >
        <thead>
            <tr>
                <th style="width: 30px;">Nro.</th>  
                <th>Nombre Completo</th>
                <th class="col-md-2">DNI</th>
                <th class="col-md-2">Celular</th>
                <th class="col-md-2">Teléfono</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="empleado in empleadoList.empleados">
                <td style="width: 30px;">{{$index + 1}}</td>
                <td> <span class="text-muted"><i class="icon-user"></i>{{empleado.apellidoPaterno}} {{empleado.apellidoMaterno}} {{empleado.nombre}}</span></td>
                <td><span class="text-success-600"><span class="status-mark border-blue position-left"></span>{{empleado.dni}}</span></td>
                <td><span class="text-success-600"><i class="icon-mobile position-left"></i> {{empleado.celular}}</span></td>
                <td><h6 class="text-semibold"><i class="icon-phone position-left"></i> {{empleado.telefono}}</h6></td>
            </tr>
        </tbody>
    </table>
    </div>
</div>

controller.js

App.controller('EmpleadoListController', function($scope,$resource,EmpleadoService,DTOptionsBuilder,DTColumnDefBuilder) {

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withDisplayLength(10)
    .withOption('bLengthChange', …

我正在使用角度数据表，并且只有一列。

当我绑定它时，数据按升序排列，而我想按接收到的顺序显示它。

有人可以帮忙吗？

控制器：

        var vm = this;
        vm.dtOptions = DTOptionsBuilder.newOptions()
        .withButtons([
            'print',
            'pdfHtml5',

        ]);
        vm.dtColumnDefs = [
            DTColumnDefBuilder.newColumnDef(0).notSortable()
        ];

HTML：

  <div ng-controller="formViewController as frmView">
    <table datatable="ng" dt-options="frmView.dtOptions" dt-column-defs="frmView.dtColumnDefs" class="row-border hover">
        <thead>
            <tr>
                <td>
                    {{Title}}
                </td>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="plugin in newArray track by $index">
                <td>
                    //Content
                </td>
            </tr>
        </tbody>
    </table>
</div>

我正在尝试将CDK数据表转换为Material Design样式的数据表(请参阅:https://material.angular.io/components/table/overview),但是当我将cdk前缀更改为md时,我得到以下错误...

未捕获错误:模板解析错误:无法绑定到'mdHeaderRowDef',因为它不是'md-header-row'的已知属性.1.如果'md-header-row'是一个Angular组件并且它有'mdHeaderRowDef'输入,那么请验证它是否是该模块的一部分.2.如果'md-header-row'是Web组件,则将'CUSTOM_ELEMENTS_SCHEMA'添加到此组件的'@NgModule.schemas'以禁止显示此消息.3.要允许任何属性将"NO_ERRORS_SCHEMA"添加到此组件的"@NgModule.schemas".

我在网上发现的每个答案都告诉我,我需要导入CdkTableModule,但我已经这样做了&cdk表工作得很好.

import {Component, OnInit, ViewChild} from '@angular/core';
import {DataSource} from '@angular/cdk';
import { CdkTableModule } from '@angular/cdk';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/first';
import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/observable/merge';
import 'rxjs/add/observable/of';
import 'rxjs/add/observable/interval';
import 'rxjs/add/operator/map';

我正在导入CdkTableModule,当我使用cdk前缀时,表格按预期显示...

<md-table [dataSource]="dataSource">

  <ng-container cdkColumnDef="number">
    <md-header-cell *cdkHeaderCellDef> number </md-header-cell>
    <md-cell *cdkCellDef="let element"><a routerLink="{{element.number}}"> {{element.number}} </a></md-cell>
  </ng-container>

  <ng-container cdkColumnDef="book">
    <md-header-cell *cdkHeaderCellDef> book </md-header-cell>
    <md-cell *cdkCellDef="let element"> {{element.book}} </md-cell>
  </ng-container>

  <md-header-row *cdkHeaderRowDef="['number', 'book']"></md-header-row>
  <md-row …

我有一个简单的查询,使用Angular 5中的httpClient post方法从API获取一些订单.

我得到了正确的答案,但我无法弄清楚如何在数据表中显示它们.

以下是我的尝试:

order.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Order } from '../models/order.model';

@Injectable()
export class OrderService {

  constructor(private http: HttpClient){
    console.log('OrderService Initialized...');
  }

  getOrders(): Observable<Order[]>{
    var url = 'http://example.com/api/orders?type=1';
    var headers = new HttpHeaders().set('x-mobile-token', 'xxxxx');
    return this.http.get<Order[]>(url, {headers: headers});
  }
}

orders.component.ts

import { Component, OnInit } from '@angular/core';
import { OrderService } from '../../services/order.service';
import { Observable } from …

我正在使用 Angular-DataTables 6.0（可在此处找到https://l-lin.github.io/angular-datatables/#/welcome）并且我遇到了重复出现的问题。当添加或删除表项时，记录会在排序或搜索时消失或重新出现。这可能是因为添加/删除是从数据表外部发生的吗？

我尝试添加“datatable=”ng“”修复许多其他人建议的问题，但这并没有改变任何东西。我还尝试添加重新渲染功能，但在这种情况下，我遇到了无法解决的“对象取消订阅”错误。作为参考，可以在这里找到一些类似的问题：类似的例子包括：（Angular ：对数据表进行排序后丢失数据）（对角度数据表中括号内的数字进行排序）（https://github.com/l-lin/angular-datatables /问题/852）

这是我的代码：

HTML:
  <table datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="table table-hover" id="t1">
                <thead>
                        <tr>
                                <th>
                                    <button id="b5">Asset ID</button>
                                </th>
                                <th>
                                    <button id="b5">Employee ID</button>
                                </th>
                                <th>
                                    <button id="b5">Asset Type</button>
                                </th>
                                <th>View</th>
                                <th>Delete</th>
                              </tr>
                              </thead>
        <tbody>
        <tr *ngFor="let a of assets; let i = index"> 
          <td>{{ a.assetID }}</td>
          <td>{{ a.currentUser }}</td>
          <td>{{ a.assetType }}</td>
          <td><button id="button1" (click)="viewAsset(a)"><i class="fas fa-search"></i></button></td>
          <td><button id="b2" class="btn" (click)="scrapAsset(a)" (mouseenter)="buttonHover(i)" (mouseleave)="buttonHoverLeave(i)"><i class="{{buttonIconArray[i].text}}"></i></button></td>
        </tr>
        </tbody>
        </table>
-elsewhere in …

我正在使用angular datatables，这是流行的 jquery 数据表库的一个角度化版本。

这是我的 html

<body ng-controller="TestCtrl">

    <input type="button" ng-click="changeColumns()" value="Change Columns"/>
    <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>

</body>

这是我的 javascript

var module = angular.module('TestApp', ['datatables']);

module.controller('TestCtrl', [
    '$scope',
    'DTOptionsBuilder',
    'DTColumnBuilder',
    function($scope, DTOptionsBuilder, DTColumnBuilder) {

         $scope.dtOptions = DTOptionsBuilder.newOptions();

         $scope.dtColumns = [
             DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
             DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB')
         ];

         $scope.changeColumns = function() {
             $scope.dtColumns = [
                 DTColumnBuilder.newColumn('ColumnA').withTitle('ColumnA'),
                 DTColumnBuilder.newColumn('ColumnB').withTitle('ColumnB'),
                 DTColumnBuilder.newColumn('ColumnC').withTitle('ColumnC'),
                 DTColumnBuilder.newColumn('ColumnD').withTitle('ColumnD')
             ];

         };
    }
]);

这就像我可以减少我的问题一样简单，但我仍然遇到相同的错误。当页面第一次加载时，我会按预期看到“ColumnA”和“ColumnB”。然后我单击表格上方的“更改列”按钮。

表格行消失了，原来的两列保留了下来，我在浏览器控制台中收到了这个错误。

Error: headerCells[i] is undefined

其次是令人讨厌的堆栈跟踪。我试图复制我之前链接的教程，但有一些细微的差别..我不明白为什么这个简单的例子对我不起作用。有人可以帮忙吗？

我正在使用angularjs数据表，每次在渲染表之前，我都会收到“表中无可用数据”消息。消息后，表格以预期方式显示数据。那么如何解决此问题？检查 演示

    app.controller('myCtrl', function($scope,$http,DTOptionsBuilder, DTColumnBuilder,DTColumnDefBuilder) {

            $scope.service = service;
            $http.get('ajax/list.php').success(function(data){
            $scope.cus_list = data;      


            $scope.vm = {};


            $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('order', [0, 'asc']);
            $scope.vm.dtColumnDefs = [
                                          DTColumnDefBuilder.newColumnDef(1).notSortable()
                                      ];


    });
});

我有以下数据表结构

<table id="display" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered hover" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>INPUT TYPE</th>
        <th>INPUT NAME</th>
        <th>VALUE</th>
        <th>UNIT</th>
        <th ng-repeat="n in TableColumns | orderBy:'Name'">{{n.Name}}</th>
        <th class="noExport" style="width:50px">VIEW</th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="x in DisplayData">
        <td>{{x.Type}}</td>
        <td>{{x.Name}}</td>
        <td>{{x.Value}}</td>
        <td>{{x.Unit}}</td>
        <td ng-repeat="n in x.OptionData | orderBy:'Name'">{{n.Value}}</td>
        <td>
            <a ng-click="gotoLink(x)"><span class="glyphicon glyphicon-eye-open"></span></a>
        </td>
</tbody>

以下是角度代码

$scope.TableColumns = [];
$scope.getAllData = function (item) {
   var DashboardData = item;
   resultService.getDataById(fetchData).then(function (response) {
       if (response.data.length > 0) {
           $scope.DisplayData = response.data;
           $scope.TableColumns = response.data[0].OptionData; …

我正在使用 PHP 作为后端开发 Angular5 项目。我被困在这个级别。以下是我的代码：

this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  order: [0, 'desc'],
  serverSide: true,
  processing: true,
  ajax: (dataTablesParameters: any, callback) => {
    that.http
      .post<DataTablesResponse>(
        'http://localhost/api/webapi/',
        dataTablesParameters,{ headers: new HttpHeaders({
          'Content-Type':  'application/json',
          'Authorization': 'token'
        })}
      ).subscribe(resp => {
        that.records = resp.data;
        callback({
          recordsTotal: resp.recordsTotal,
          recordsFiltered: resp.recordsFiltered,
          data: []
        });
      });
  },
  columns: [{ data: 'id' }, { data: 'name' }]
};

正如我在这段代码中所观察到的，我发送的是数据表“dataTablesParameters”的默认参数。如何添加我的自定义参数，如 (entryid) 以及“dataTablesParameters”？

请指导。