标签: angular-datatables

我正在尝试在特定列上设置搜索禁用.我使用这个角度数据服务器端.

https://l-lin.github.io/angular-datatables

通常在jquery我可以只:

 columns:[{data:"foo", name:"foo", searchable:false}]

我试过用过:

   $scope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('ajax', {
                url: apiRoot + 'merchant-list'
            })
            .withDataProp('data')
            .withOption('serverSide', true)
            .withOption('order', [0, 'asc'])

  $scope.dtColumns = [
            DTColumnBuilder.newColumn('name', 'Name'),
            DTColumnBuilder.newColumn('type', 'Type'),
            DTColumnBuilder.newColumn('username', 'Username'),
 ]

 $scope.dtColumnDefs = [
            DTColumnDefBuilder.newColumnDef(0),
            DTColumnDefBuilder.newColumnDef(1).withOption('searchable', false),
            DTColumnDefBuilder.newColumnDef(2).withOption('searchable', false)
        ]

似乎工作但是,columnDef的位置不正确.当我将newColumnDef(1)搜索为false时,不要搜索的列应该是第二列,但显然它会禁用第一列.

有没有办法让它禁用搜索特定的列并订购它？

谢谢

编辑:我已经尝试了'orderable',false和notvisible正在使用columnDef 0.看起来只有可搜索失败.

我正在尝试在此链接中进行Angularjs Datatable服务器端分页https://l-lin.github.io/angular-datatables/#/serverSideProcessing

所以我使用这段代码

    $scope.dtOptions = DTOptionsBuilder.newOptions()
       .withOption('ajax', {
                  dataSrc: function(json) {
                    conole.log(json)
                    json['recordsTotal'] =json.length
                    json['recordsFiltered'] = json.length
                    json['draw']=1
                    conole.log(json)
                    return json;
                  },
              url: 'api/footestrecords',
              type: 'GET'
           })
       .withOption('processing', true)
       .withOption('serverSide', true)
       .withPaginationType('full_numbers');

我在dataSrc参数中手动添加了recordsTotal,recordsFiltered和row

这是添加recordsTotal,recordsFiltered和row之前和之后的json数据

添加之前的json数据

[Object, Object, Object, Object, Object, Object, Object, Object,
Object,Object, Object, Object, Object, Object, Object, Object, Object,
Object, Object, Object, Object, Object, Object, Object, Object, Object,
Object, Object]

添加后的json数据

 [Object, Object, Object, Object, Object, Object, Object, Object,
  Object, Object, Object, Object, Object, Object, Object, Object, …

有没有办法使用DTColumnBuilder在文本框中呈现具有模型绑定的列？

就像是:

DTColumnBuilder.newColumn('ColumnName').withTitle('Column Name').renderWith(function (data) {
   return '<input type="text" ng-model="ColumnName" />';
}),

我正在使用Angular-Datatables.我需要能够根据返回的数据动态创建表.换句话说,我不想指定列标题.

例:

json数据:

[
 {
  "id": "2",
  "city": "Baltimore",
  "state": "MD",
 },
 {
  "id": "5",
  "city": "Boston",
  "state": "MA",
 },
 {
  "id": "8",
  "city": "Malvern",
  "state": "PA",
 },
]

列标题:

id,城市,州

有人可以帮忙吗？

我目前正在使用angular2开发Web应用程序的用户界面.我有一个p-dataTable组件(primeNG),当鼠标在这个p-dataTable的一行上时,我想调用一个函数.该函数应检索触发鼠标悬停事件的行的数据.

如果你有任何想法如何使用p-dataTable处理鼠标悬停事件,我将很高兴知道解决方案:)

先感谢您.

我正在努力获取角度方法并使用此代码https://l-lin.github.io/angular-datatables/#/basic/angular-way

- node version:v6.10.3
- npm version:v6.10.3
- angular version:4.3.2
- jquery version:3.2.1
- datatables version:1.10.15
- angular-datatables version:4.2.0
- angular-cli version:1.2.6

我已执行此步骤来修复模块“ AppModule”导入的意外值“ DataTablesModule”。请添加一个@NgModule注释。

 1-in tsconfig.json add
"baseUrl": ".",
"paths": {
   "@angular/*": [
    "node_modules/@angular/*"
 ]
 2-in webpack.comon.js add 
  plugins: [
         new TsConfigPathsPlugin({
          configFileName: helpers.root('tsconfig.json'),
          compiler: "typescript",
        })
   ]  

但是得到这个错误

Can't bind to 'dtOptions' since it isn't a known property of 'table'. 

谁能帮我解决这个问题？

我正在尝试在列上实现简单的自定义搜索.这在https://datatables.net/examples/plug-ins/range_filtering.html中有详细记载.但是我的(目前为止)唯一的问题是访问$ .fn.dataTable.ext.search数组,添加并稍后删除我的自定义搜索功能.

通过角度数据表时,此数组的路径是什么？

在此先感谢您的帮助.

 this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {

      dtInstance. <-- what goes here?
 });

我在一个页面中有两个 Angular 数据表。我正在从 Web 服务器（异步）获取数据。我为此创建了一个独立的组件。我的第一个表正确显示并绑定到排序和分页器，但第二个不起作用。虽然它显示了数据，但分页器和排序在第二个表上不起作用。任何想法可能是什么问题？

我的组件 TS 文件：

displayedColumns = ['customerId', 'projectId'];
@Input() dataSource2 = new MatTableDataSource<ScheduledTest>();
private paginator: MatPaginator;
private sort: MatSort;

@ViewChild(MatPaginator) set matPaginator(mp: MatPaginator) {
this.paginator = mp;
this.dataSource2.paginator = this.paginator;
}

@ViewChild(MatSort) set matSort(mp: MatSort) {
this.sort = mp;
this.dataSource2.sort = this.sort;
}

ngOnInit() {
this.getAllCurrentTestCases();
}

getAllCurrentTestCases() {
this.isError = false;
this.isLoading = true;
this.httpService.getAllCurrentTestCases(this.userService.accountNumber, this.userService.authToken)
  .then((data: AutomatedTest[]) => {
    this.isLoading = false;
    this.dataSource2 = new MatTableDataSource<AutomatedTest>(data);
    this.dataSource.sort = this.sort;
  })
  .catch(error => {
    this.isError …

我有一个要求，我必须将特定产品添加到数据表并重新绑定数据表，以便更新其计数。我正在使用 MVC 和 angularjs 1.6.2

我正在创建数据表如下：

<table id="dtProducts" ng-if="AllProducts"
       class="table manage-user-table offer-mgt-table market-selection-tab"
       datatable="ng" dt-options="dataTableOpt">
    <thead>
        <tr>
            <th><input type='checkbox' class="selectAllMarket" 
                       value='SelectAll' ng-model="selectAll" >
            </th>
            <th>Product Name</th>
            <th>Product Type</th>
        </tr>
    </thead>
    <tbody>
        <tr dt-rows ng-repeat="product in AllProducts">
            <td><input type="checkbox" class="selectMarket"
                       ng-model="product.selected"
                       data-offerid="{{product.ID}}"
                       ng-click="toggleSelect(product.selected, $index)">
            </td>
            <td>{{product.Name}}</td>
            <td>{{product.VerticalType.VerticalTypeDisplayName}}</td>

        </tr>
    </tbody>
</table>

视图上有一个部分，其中包含一个用于获取产品名称的文本框和一个用于获取产品类型的下拉列表。它还包含一个Add单击按钮的按钮，在服务器上点击一个帖子以保存该产品以及该帖子的成功在前端，我调用函数来重新加载AllProducts. 一旦调用该函数，我就会收到错误消息

TypeError: o.ngDestroy 不是 angularjs 数据表中的函数。

将产品保存到表中后，通过以下代码完成数据表的重新加载

var getAllProducts = function () {
    var urlgetAllProducts = apiURL + "/AllProducts?providerId=" + providerID;
    $http({
        url: urlgetAllProducts,
        method: 'GET', …

我在数据表方面遇到一些问题-背景是我需要通过可观察的订阅进行多个同时的API调用，然后将这些调用合并为一个数据结构。我需要通过进入数据表这个数据，我成功地这样做，然而，一旦数据被加载，我ViewChild为MatPaginator和MatSort，所以我的分页程序和排序功能的值，如果没有数据，即存在0未检测到变化页面中的值。

由于ngAfterViewInit完成后我的数据加载仍在执行，因此我需要在规范之外做点什么。

我尝试过的一些方法：

• 添加ChangeDetectorRef和运行ChangeDetectorRef.DetectChanges()无济于事
• 处理数据，以便函数在API调用完成后运行
• 使用NgZone

希望这对我的代码更有意义（我尝试通过删除函数来使其简短，但是多个函数正在将值写入dataSource数组（this.dataHashArray）

data-table.html

<div class="global-container-padding">

    <mat-form-field>
        <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search Shares">
    </mat-form-field>

    <div class="data-container">
            <table mat-table [dataSource]="dataSource" matSort class="share-table mat-elevation-z8">

                <!-- Checkbox Column -->
                <ng-container matColumnDef="select">
                    <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox (change)="$event ? masterToggle() : null"
                                      [checked]="selection.hasValue() && isAllSelected()"
                                      [indeterminate]="selection.hasValue() && !isAllSelected()">
                        </mat-checkbox>
                    </th>
                    <td mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                                      (change)="$event ? selection.toggle(row) : null"
                                      [checked]="selection.isSelected(row)">
                        </mat-checkbox>
                    </td>
                </ng-container>

                <!-- SVMName Column -->
                <ng-container …