标签: angular-datatables

我在ngx-datatable中为列添加多个支柱时遇到了一些问题:

columns = [
  { prop: 'semesterName', name: '?????', resizeable: false },
  { prop: 'eventName', name: '????', resizeable: false },
  { prop: 'when', name: '???? ????', resizeable: false },
  { prop: 'lecturerName', name: '????', resizeable: false },
  { prop: 'hugName', name: '???', resizeable: false },
];

我需要在一列中显示两个道具.就像一列中的'eventName'和'when'一样.

该模型:

export class Course {
  semester: string;
  semesterName: string;
  courseObject: string;
  course: string;
  courseName: string;
  eventObject: string;
  event: string;
  eventName: string;
  hugName: string;
  dayOfWeek: string;
  dayOfWeekNum: string;
  where: string;
  when: string;
  lecturerName: string; …

我尝试使用过滤器为角度数据表中的列设置宽度.但是列的宽度没有改变.

我试着跟随

   var columnsSpecification = [
      {
          type: 'text',
          bRegex: true,
          bSmart: true
      }, {
          type: 'text',
          bRegex: true,
          sWidth:"90px"}];


    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withBootstrap()
      .withOption('scrollX', '700%')
      .withOption('scrollY', height + 'px')
      .withOption('oLanguage', { "sEmptyTable": " " })
      .withOption('lengthMenu', [[-1, 1000, 100, 50, 25, 10], ['All', 1000, 100, 50, 25, 10]])
      .withOption('paging', false)
      .withOption('bInfo',false)
      .withColumnFilter({          
      aoColumns:columnsSpecification 
  })
  .withTableTools('/Content/DataTables/swf/copy_csv_xls.swf')
  .withTableToolsButtons(['xls']);

在html文件中我试过这个:

   <table id="table-machines" datatable="ng" class="table table-striped" dt-options="dtOptions">
    <thead>
        <tr>
            <th>Name</th>
            <th style="width: 90px !important">Value</th>                
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="m in records>
            <td>{{m.name}}</td>
            <td …

我正在使用Angular-datatable显示数据,并且它与静态数据一起正常工作,但是当动态提供数据时它不起作用.它花了我很多时间.

我想要实现的是从加载数据ajax在datatable.

以下代码我用于初始化,其工作正常的Plunker:

function MyChapterController($scope, $q, DTOptionsBuilder, DTColumnBuilder, chapter) {
    var vm = this;     

    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(2)
        .withDOM('pitrfl');
    vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('title').withTitle('First name'),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
    ];

    vm.myChapters = [];
}

这是以下代码不工作检查Plunker:

function MyChapterController($scope, $q, $resource, DTOptionsBuilder, DTColumnBuilder, chapter) {
    var vm = this;     

    vm.dtOptions = DTOptionsBuilder.newOptions()
        .withPaginationType('full_numbers')
        .withDisplayLength(2)
        .withDOM('pitrfl');
    vm.dtColumns = [
        DTColumnBuilder.newColumn('id').withTitle('ID'),
        DTColumnBuilder.newColumn('title').withTitle('First name'),
        DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
    ];

    vm.myChapters = [{
          "id": 860,
          "firstName": "Superman",
          "lastName": "Yoda" …

我正在使用数据表:https ://l-lin.github.io/angular-datatables 和bootstrap:https://angular-ui.github.io/bootstrap/

这就是我尝试实现的目标:在使用来自bootstrap的模态添加数据并保存之后,数据表将重新加载(无需重新加载当前路由).

这是我的modalCtrl:

  .controller('addModalCtrl', ['$scope', '$modalInstance', '$http', 'AdminMenu', 'ResultService',
    function ($scope, $modalInstance, $http, AdminMenu, ResultService) {

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.menu = {};

    $scope.doSubmit = function () {
        var data = {
            name: $scope.menu.title,
            icon: $scope.menu.icon
        };

        AdminMenu.save(data, function (response) {
            $scope.menu = {};
            ResultService(response);
            $modalInstance.dismiss('cancel');
        }, function (response) {
            ResultService(response.data);
        })
    };
}])

这是我的数据表功能:

 function AdminMenuTableData($compile, $scope, $modal, DTOptionsBuilder, DTColumnBuilder, SweetAlert, AdminMenu, ResultService, APIROOT) {

$scope.dtOptions = DTOptionsBuilder.fromSource(APIROOT + 'admin-menus') …

我们有一个使用Angular DataTables的Web表单(DataTables 1.10.10/angular-datatables - v0.5.3).我们使用来自后端的JSON提供数据.该表配置了分页,每10秒手动重新加载表的数据.这一切都运行正常,当我从第一个页面中选择一个不同的页面并刷新表格然后重置分页.我尝试了绘制的不同参数(https://datatables.net/reference/api/draw())方法,但没有任何区别..非常感谢提前!!

我的HTML表格:

<table datatable="ng" id="datatable1" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-hover" dt-instance="dtInstance">

<tr ng-repeat="session in data.serverData[data.selectedAgent]" class="gradeX">

这是我们的控制器:

App.controller("ReportAgentSessionsListController", [
"$scope", "$http", "sessionsListData", "$timeout", "DTOptionsBuilder", "DTColumnDefBuilder", function ($scope, $http, sessionsListData, $timeout, DTOptionsBuilder, DTColumnDefBuilder, DTInstances) {

$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType("simple_numbers").withDisplayLength(25).withOption("retrieve", true).withOption('order', [0, 'desc']);
 $scope.dtColumnDefs = [
        DTColumnDefBuilder.newColumnDef(0),
        DTColumnDefBuilder.newColumnDef(1),
        DTColumnDefBuilder.newColumnDef(2),
        DTColumnDefBuilder.newColumnDef(3).notSortable(),
    ];

    // Get original request params
    $scope.dateData = JSON.parse(sessionsListData.config.data);

    var timer;  // used for auto-refresh
    var vm = this;
    $scope.cduInterval = 1000;
    $scope.counter = 0;
    $scope.dtInstance = …

我正在尝试使用我的angualar 6项目添加Datatables插件(datatables.net)工具.我不知道如何使用npm安装程序将必要的css,js和其他必需文件包含到我的项目中.选择我必要的选项后,我遵循NPM Install方法:

npm install --save datatables.net-bs4
npm install --save datatables.net-buttons-bs4
npm install --save datatables.net-colreorder-bs4
npm install --save datatables.net-responsive-bs4
npm install --save datatables.net-rowgroup-bs4
npm install --save datatables.net-scroller-bs4

安装后,我不确定如何在我的项目中使用这些.我的项目使用ngx-bootstrap(https://www.npmjs.com/package/ngx-bootstrap)进行样式设计.

style.scss // where I am only importing my css theme from node_modules

在ngx-bootstrap中,样式是组件明智的,我很容易使用它们.那么,我如何将数据表功能用作组件？换句话说,我应该在哪里包含css和必需的js文件来实现页面上的数据表设施？

如果有人这样做,请告诉我,否则任何建议将不胜感激.

谢谢.

我在一个页面中有两个 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', …

我无法将 DataTableModule 包含到带有数据表的 Angular 6 项目中。我正在使用带有数据表的 Angular cli 6。我的代码显示找不到模块 DataTablesModule 的错误。我已经安装了与 datatable 和 jquery 相关的所有软件包。它也显示到 node_modules 文件夹中，但无法添加到 app.module.ts 中。

我附上下面的屏幕截图：

这是我的代码。

在浏览器中出现此错误

我要求数据表按一列排序，然后按第二列排序。Angular Material 中是否有支持它的东西？任何帮助将不胜感激。