Angular 2、DataTables.net 和使用 DataTables.net-bs 的分页答案

【问题标题】：Angular 2, DataTables.net, and Pagination using DataTables.net-bsAngular 2、DataTables.net 和使用 DataTables.net-bs 的分页
【发布时间】：2017-01-27 18:51:41
【问题描述】：

我目前正在使用 Angular 2 编写应用程序，并将其配置为使用 DataTables.net、DataTables.net-bs 和 DataTables.net-select。

在大多数情况下，一切看起来和工作都很棒。除了一个例外，应用程序的分页显示好像没有应用任何样式。

我检查了浏览器中的源代码，并应用了默认的类和 HTML 结构：

<div class="dataTables_paginate paging_full_numbers" id="myTable_paginate">
    <a tabindex="0" class="paginate_button first disabled" id="myTable_first" aria-controls="myTable" data-dt-idx="0">First</a>
    <a tabindex="0" class="paginate_button previous disabled" id="myTable_previous" aria-controls="myTable" data-dt-idx="1">Previous</a>
    <span>
        <a tabindex="0" class="paginate_button current" aria-controls="myTable" data-dt-idx="2">1</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="3">2</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="4">3</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="5">4</a>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="6">5</a>
        <span class="ellipsis">…</span>
        <a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="7">580</a>
    </span>
    <a tabindex="0" class="paginate_button next" id="myTable_next" aria-controls="myTable" data-dt-idx="8">Next</a>
    <a tabindex="0" class="paginate_button last" id="myTable_last" aria-controls="myTable" data-dt-idx="9">Last</a>
</div>

链接的功能可以正常工作，但它在显示屏上看起来很丑，因为我使用的是 DataTables Bootstrap CSS，它没有使用无序列表输出适当的 HTML。我进入浏览器中的调试器，正在加载 DataTables.net-bs 的代码。我在 JavaScript 中添加了一堆断点，并且正在调用工厂方法。但是，它似乎再也没有被调用过。

这是我的vendors.browser.ts的相关代码

require('datatables.net')();
require('datatables.net-bs')();
require('datatables.net-select')();
require('file-saver');

我也关闭了 AMD，因为我知道这对某些人来说是个问题。下面是 webpack.common.js 文件的相关代码：

    {
      test: /datatables\.net.*/,
      loader: 'imports?define=>false'
    },

顺便说一句，另一个插件 Datatables.net-select 运行正常。

如果我无法解决这个问题，我可以使用 DataTables.net-dt 中包含的样式，但我更愿意让它正常工作。

有人对正在发生的事情有任何潜在的想法吗？

【问题讨论】：

标签： javascript angular datatables

【解决方案1】：

将 datatables.net 集成到 ANGULAR 4 CLI 的步骤

我们需要将 datatables.net 安装为一个全局库（适用于所有组件）。这意味着库不会被延迟加载，而是在第一个页面加载时导入/下载。

经过 2 天的研究和对 Angular CLI 的大量研究，我能够使其与最新版本的 CLI (1.1.3) 和 Angular 4 一起工作

这些是 wiki 中对我有帮助的相关文章：

https://github.com/angular/angular-cli/wiki/stories-global-scripts

https://github.com/angular/angular-cli/wiki/stories-third-party-lib

安装 JQuery 及其类型

npm install --save jquery
npm install --save-dev @types/jquery

安装 datatables.net 及其类型

npm install --save datatables.net
npm install --save-dev @types/datatables.net

[可选] 添加 datatables.net 主题（引导主题）
```
npm install --save datatables.net-bs
```

[可选] 添加 datatables.net 扩展（选择、按钮等）

npm install --save datatables.net-select
npm install --save datatables.net-select-bs
npm install --save-dev @types/datatables.net-select

现在让我们配置打字，这样我们就可以让编译器理解这些库并且在编译时不会出错。打开tsconfig.app.json 并在types 节点下添加以下类型：
```
"types": [
    "YOUR_OTHER_TYPINGS_HERE",
    "jquery",
    "datatables.net",
    "datatables.net-select"
]
```

最后，我们需要将我们的库添加到全局脚本和样式部分。打开tsconfig.app.json 文件并更新styles 和scripts 部分，如下所示：

"styles": [
    "YOUR_OTHER_CSS_HERE",
    "../node_modules/bootstrap/dist/css/bootstrap.css",
    "../node_modules/datatables.net-bs/css/dataTables.bootstrap.css",
    "../node_modules/datatables.net-select-bs/css/select.bootstrap.css",
    "YOUR_OTHER_CSS_HERE"
],
"scripts": [
    "YOUR_OTHER_JS_LIBS_HERE",
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js",
    "../node_modules/datatables.net",
    "../node_modules/datatables.net-bs/js/dataTables.bootstrap.js",
    "../node_modules/datatables.net-select/js/dataTables.select.js",
    "YOUR_OTHER_JS_LIBS_HERE",
],

只要确保你正确设置了库的顺序，如果你在中间添加库并不重要。但基本上你需要JQuery，然后是Bootstrap，然后是datatables.net，最后是你可能需要的任何datatables.net扩展或插件。

请注意，将几乎所有其他 JQuery 插件导入 Angular 4 CLI 项目时，应执行相同的过程。

现在您可以在组件中使用数据表，如下所示：

import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from '@angular/core';
import { Shipment } from '../../models';

@Component({
    selector: 'shipment-list',
    template: `
        <table id="shipments_table" class="table table-striped table-bordered table-hover no-footer">
        </table>
    `,
    styleUrls: ['./shipment-list.component.css']
})
export class ShipmentListComponent implements OnInit {
    private shipmentsTable: any;
    private tableWidget: any;
    @Input() shipments: Shipment[];
    // Event Emmiter for when the user selects a row
    @Output() shipmentSelected: EventEmitter<Shipment> = new EventEmitter();
    constructor(
        private el: ElementRef // You need this in order to be able to "grab" the table element form the DOM 
    ) { }

    public ngOnInit() {
        this.loadShipments();
    }
    public loadShipments(): void {
        if (this.tableWidget) {
            this.tableWidget.destroy(); // essentially refreshes the table
            // you can also remove all rows and add new
            // this.tableWidget.clear().rows.add(this.shipments).draw();
        }
        let tableOptions: any = {
            data: this.shipments,
            dom: 'rt',
            select: true,
            columns: [
                { title: 'Content', data: 'content' },
                { title: 'Packages', data: 'packages' },
                { title: 'Weight', data: 'weight' }
            ]
        }
        this.shipmentsTable = $(this.el.nativeElement.querySelector('table'));
        this.tableWidget = this.shipmentsTable.DataTable(tableOptions);
        this.tableWidget.on('select', (e, dt, type, indexes) => {
            // I DIDN'T TRY THIS IN HERE...Just debug it and check the best way to emit an actual object
            this.shipmentSelected.emit(this.shipments[indexes[0]]);
        });
    }
}

【讨论】：

感谢您的信息，但第 6 步出现错误：“../node_modules/datatables.net”，应为：“../node_modules/datatables.net/js/jquery.数据表.js",

【解决方案2】：

我解决了这个问题。

问题在于这段代码：

require('datatables.net')();
require('datatables.net-bs')();
require('datatables.net-select')();
require('file-saver');

问题出在 DataTables.net 模块开头的检查中。在每个模块的顶部，您有以下内容：

(function( factory ){
    if ( typeof define === 'function' && define.amd ) {
        // AMD
        define( ['jquery', 'datatables.net'], function ( $ ) {
            return factory( $, window, document );
        } );
    }
    else if ( typeof exports === 'object' ) {
        // CommonJS
        module.exports = function (root, $) {
            if ( ! root ) {
                root = window;
            }

            if ( ! $ || ! $.fn.dataTable ) {
                // Require DataTables, which attaches to jQuery, including
                // jQuery if needed and have a $ property so we can access     the
                // jQuery object that is used
                $ = require('datatables.net')(root, $).$;
            }

            return factory( $, root, root.document );
        };
    }
    else {
        // Browser
        factory( jQuery, window, document );
    }

使用上面的代码，我们没有传入全局 $ 变量。当第一次导入运行时，$ 变量为空，因此它适当地设置了值。当第二次导入时，传入的值为 null 并且它与插件的扩展一起被重置。当第三次导入运行时，我们遇到了同样的问题。选择功能现在已经存在，但我们覆盖了 Bootstrap 插件的功能。

所以，修正后的代码如下：

require('datatables.net')(window, $);
require('datatables.net-bs')(window, $);
require('datatables.net-select')(window, $);
require('file-saver');

我的代码基于此：[https://github.com/brakmic/Angular2-Articles/blob/master/article6/src/init/vendor.ts][1]

window.$ = window.jQuery = require('jquery');
require('bootstrap-loader');
require('datatables.net')();
require('datatables.net-bs')();
require('datatables.net-buttons')();

我的打字稿编辑器在第一行就吐了，所以我删除了它并没有完全理解幕后发生的事情。经验教训。

【讨论】：