标签: angular-datatables

我正在尝试使用Angular DataTables和服务器端处理选项,但是当我尝试在他们的" Angular方式示例 "中启用它时,只有第一个请求被呈现,后续请求(分页,排序,搜索)被发送但是他们永远不会更新表格.

我正在使用角度数据表的服务器端处理.无论如何,只有在单击搜索按钮时才会在搜索框中关闭自动过滤并使其搜索/过滤(ajax调用服务器端).希望有人在角度数据表方面有所帮助.

嘿伙计们.

我是JS和Angular的新手,试图在我的项目中实现angular-datatable版本.

首先,我使用了"角度方式",根据性能,这是一个糟糕的决定.我的表中有很多行.所以我决定尝试使用ajax构建我的数据表并使用dtOptionsBuilder构建我的列并使用dtOptions填充表.

但是,我有一些复杂性...我得到一个未知的提供程序错误..更具体地说:

错误:[$ injector:unpr]未知提供者:datatablesProvider < - datatables < - OverviewCtrl

我不太确定,我做错了什么？这是我的控制器.

angular.module("invoices").controller("OverviewCtrl", ["apiService", "datatables", 'utilsService', "$q", "invoiceService", "ngDialog", "$controller", "authFactory", "redirectService", "$rootScope", OverviewCtrl]);

function OverviewCtrl(apiService, utilsService, dtOptionsBuilder, dtColumnBuilder, $q, invoiceService, ngDialog, $controller, authFactory, redirectService, $rootScope) {
var NUMBER_OF_TIMEENTRIES_TO_SHOW = 10;
var vm = this;

if (!authFactory.identity.isAuthenticated) {
    redirectService.redirect("overview", 2, "login", 3);
}

vm.dtOptions = dtOptionsBuilder.fromSource(vm.latestInvoices)
.withPaginationType('full_numbers');
vm.dtColumns = [
    dtColumnBuilder.newColumn('CompanyName').withTitle('Client'),
    dtColumnBuilder.newColumn('ProjectName').withTitle('Project'),
    dtColumnBuilder.newColumn('InvoiceID').withTitle('ID'),
    dtColumnBuilder.newColumn('InvoiceDate').withTitle('Inv. Date'),
    dtColumnBuilder.newColumn('InvoiceStart').withTitle('Start Date'),
    dtColumnBuilder.newColumn('InvoiceEnd').withTitle('End Date'),
    dtColumnBuilder.newColumn('DKKexVAT').withTitle('DKK ex VAT'),
    dtColumnBuilder.newColumn('CustomerInvoiceGroup.Label').withTitle('CIG'),
    dtColumnBuilder.newColumn('Attention').withTitle('Attention'),
    dtColumnBuilder.newColumn('CustManager').withTitle('Customer Manager'),
    dtColumnBuilder.newColumn('Regarding').withTitle('Regarding'),
    dtColumnBuilder.newColumn('DueDate').withTitle('Due Date'), …

我试图在角度数据表上实现服务器端分页但我继续收到以下错误: Error: You cannot use server side processing along with the Angular renderer!

请参阅以下相关代码:

purchasesTable.jade

.panel.panel-default.userTable
  .panel-heading.tableStatementHeader Purchases
  .panel-body
    div()
      table.row-border.hover(datatable='ng', dt-options='purchasesCtrl.dtOptions', dt-columns='purchasesCtrl.dtColumns')

purchasesTable.controller.js

    (function() {
        'use strict';

        angular
            .module('app.purchasesTable')
            .controller('PurchasesTableController', PurchasesTableController);

        PurchasesTableController.$inject = ['envService','$resource', 'DTOptionsBuilder', 'DTColumnBuilder','$http','$state','$stateParams','PurchasesTableService', '$scope'];
        function PurchasesTableController(envService, $resource, DTOptionsBuilder, DTColumnBuilder,$http,$state,$stateParams,PurchasesTableService,$scope) {

            var vm = this;

            activate();

            ////////////////

            function activate() {
              vm.id = $stateParams.id;

              //STYLE TABLES
              vm.dtOptions = DTOptionsBuilder.newOptions()
                                .withOption('ajax', function(data, callback, settings){
                                  console.log(data);

                                  PurchasesTableService.getData()
                                    .then(function(result){
                                      console.log('THIS', result);
                                    });
                                })
                                .withDataProp('data')
                                .withOption('serverSide', true)
                                .withOption('processing', true)
                                .withOption('order', [[0, 'desc']]) …

即使数据已加载，“未找到匹配的记录”行仍保留在我的表中。

该表定义如下：

<table  datatable dt-options="gvc.dtOptions" class="table table-striped">
<thead>
<tr>
    <th data-priority="1">Alert Time</th>
    <th data-priority="2">Description</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="alert in gvc.recentAlerts">
    <td>{{alert.alert_time}}</td>
    <td>{{alert.sent_text}}</td>
</tr>
</tbody>

控制器中的dtOptions如下：

    self.dtOptions = DTOptionsBuilder.newOptions()
  .withDOM('t')
  .withOption('scrollY', '200px')
  .withOption('scrollCollapse', true)
  .withOption('paging', false)
  .withOption('bSort', false)
  .withOption('responsive', true);

关于它为何保留的任何想法？

在表中，我想使用多选下拉列表过滤行。

这是plunker。

例子：

当我在下拉列表中选择 2 个国家和 2 个月时，相应地在表中选择数据。

HTML：

 <div id="datatable-buttons_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                            <!--page size-->
                            <div class="table-search-bar">
                                <div class="dt-buttons btn-group">
                                    PageSize:
                                    <select ng-model="entryLimit" class="form-control"> 
                                        <option>5</option>
                                        <option>10</option>
                                        <option>20</option>
                                        <option>50</option>
                                        <option>100</option>
                                    </select>
                                </div>
                                <!--filter-->
                                <div id="datatable-buttons_filter" class="dataTables_filter"><label>Filtered:<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control input-sm" aria-controls="datatable-buttons" /></label></div>
                            </div>
                            <div ng-show="filteredItems > 0">
                                <table id="datatable-buttons" class="table table-striped table-bordered">
                                    <thead>
                                      <th> <input type="checkbox" ng-model="selectRowId" ng-click="selectedAll()"></th>
                                   <th>id</th>
                                    <th><a ng-click="sort_by('year');">Year&nbsp;&nbsp;</a></th>
                                    <th><a ng-click="sort_by('month');">Month&nbsp;</a></th>
                                    <th><a ng-click="sort_by('country');">Country&nbsp;</a></th>
                                    <th><a ng-click="sort_by('mobile_operator');">Mobile Operator&nbsp;</a></th>
                                    <th><a ng-click="sort_by('service');">Service&nbsp;</a></th>
                                    <th>Action</th>         
                                    </thead>
                                    <tbody ng-init="get_product()">
                                        <tr …

我有一个带有Angular 2的ngx-datatable,它有一些非常长的列名.我想复制他们使用Auto Height for row(链接到文档)所做的事情,但是只会让真正很长的名字换成多行.

通常情况下这不是问题,但是我对Angular的新见感被卡住了.正常的事情,如溢出包装或自动换行似乎不起作用.任何帮助和/或建议将不胜感激.谢谢!

我目前的代码:

  <div class="full-width">
    <ngx-datatable
      class='material'
      [rows]='rows'
      [columns]="columns"
      [columnMode]="'standard'"
      [headerHeight]="150"
      [footerHeight]="50"
      [scrollbarH]="true"
      [rowHeight]="'auto'"
      >
    </ngx-datatable>
  </div>

我将使用 dataSource 作为数组的材料数据表。

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material';
import { AjouttextService } from '../ajouttext.service';
import { DataSource } from "@angular/cdk/collections";
import { Observable } from "rxjs/Observable";
import { nomchamp } from '../model';

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {

  constructor(private dataService: AjouttextService) { }
  data: nomchamp[] = [{ id: "33", text: "HAHA" }, { id: "55", text: "bzlblz" }];

  displayedColumns = ['text'];
  dataSource = this.data; …

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

这是我为我的项目创建的 angular-cli.json 文件。

项目的组件如下所示；

ngOnInit() {
this.dtOptions = {
  pagingType: 'full_numbers',
  pageLength: 10,
  dom: 'Bfrtip',
  buttons: [
    'copy', 'print', 'csv','columnsToggle','colvis','pdf','excel']    
  };
  this.loadapi();
}

在这里，我从示例 json 创建了一个数据表。除了导出excel和pdf的按钮没有显示其他按钮显示在UI上之外，一切都很好。可能是什么问题？

我在我的 Angular 应用程序中使用angular-datatables。当数据更改时（例如，填写并提交表单时），我需要刷新数据表。等效的 jQuery 代码是

$('#my-datatable').DataTable.ajax.reload()。

我正在使用 Angular 7。这是我正在使用的库的链接。