Javascript Angle 2、DataTables.net和使用DataTables.net-bs进行分页

我目前正在使用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>

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

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

另外，另一个插件Datatables.net-select可以正常工作

如果我不能弄明白这一点，我可以使用DataTables.net-dt中包含的样式，但我更愿意让它正常工作

---

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

我解决了这个问题

问题在于此代码：

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 );
    }

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

在上面的代码中，我们没有传入全局$变量。第一次导入运行时，$变量为null，因此它会适当地设置值。当第二次导入时，传入的值为null，它将与插件的扩展一起重置。当第三次导入运行时，我们遇到了相同的问题。选择功能现在已经存在，但是我们为引导插件重写了该功能

因此，更正的代码如下所示：

(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 );
    }

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

我的代码基于以下内容：[

---

我的typescript编辑器在第一行出现呕吐，因此我删除了它，因为我没有完全理解幕后发生的事情。吸取的教训。

我解决了问题

问题在于此代码：

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 );
    }

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

在上面的代码中，我们没有传入全局$variable。当第一次导入运行时，$variable为null，因此它会适当地设置值。当第二次导入时，传入的值为null，它会与插件的扩展一起重置。当第三次导入运行时，我们会遇到同样的问题。选择函数ity现在已经存在了，但是我们过度编写了引导插件的功能

因此，更正的代码如下所示：

(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 );
    }

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

我的代码基于以下内容：[

---

我的typescript编辑器在第一行出现问题，因此我删除了它，因为我没有完全了解幕后的情况。吸取的教训。

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

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

经过两天的研究和对Angular CLI的大量挖掘，我能够使用最新版本的CLI（

1.1.3

）和Angular 4

以下是wiki中帮助我的相关文章：

安装JQuery及其键入

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

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

安装datatables.net及其键入

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

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

[可选]添加datatables.net主题（引导主题）

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

现在让我们配置类型化，以便让编译器理解这些库，并且在编译时不会出错。 打开

tsconfig.app.json

并在

types

节点下添加以下键入：

"types": [
    "YOUR_OTHER_TYPINGS_HERE",
    "jquery",
    "datatables.net",
    "datatables.net-select"
]

最后，我们需要将库添加到全局脚本和样式部分。 打开

tsconfig.app.json

文件并更新

样式

和

脚本

部分，如下所示：

"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",
],

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]]);
        });
    }
}

<>请确保您将库的顺序设置为正确，如果在中间添加库并不重要。但是本质上，您需要“代码> jQuery ，然后<代码> Bootstrap ，然后<代码>数据表.NET<代码>，最后是您可能需要的任何DATATABLIS.NET扩展或插件。

请注意，对于将几乎任何其他JQuery插件导入Angular 4 CLI项目，都应该执行相同的过程

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

"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",
],

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]]);
        });
    }
}

从'@angular/core'导入{Component，OnInit，Input，Output，EventEmitter，ElementRef}；
从“../../models”导入{shipping}；
@组成部分({
选择器：'装运列表'，
模板：`
`,
样式URL:['./装运列表.component.css']
})
导出类ShipmentListComponent实现OnInit{
私人船舶：任何；
私人桌面小部件：任何；
@输入（）装运：装运[]；
//用户选择行时的事件提示器
@Output（）shipmentSelected:EventEmitter=neweventemitter（）；
建造师(
private el:ElementRef//为了能够从DOM中“抓取”表元素，您需要这个
) { }
公共ngOnInit（）{
这是loadshippings（）；
}
公共装载装运（）：void{
if（this.tableWidget）{
this.tableWidget.destroy（）；//本质上刷新表
//您还可以删除所有行并添加新行
//this.tableWidget.clear（）.rows.add（this.shippings.draw（）；
}
let tableOptions:任意={
数据：这是我们的出货量，
dom:'rt'，
选择：true，
栏目：[
{title:'Content'，data:'Content'}，
{title:'Packages'，data:'Packages'}，
{标题：'Weight'，数据：'Weight'}
]
}
this.shipmentsTable=$（this.el.nativeElement.querySelector（'table'）；
this.tableWidget=this.shipmentsTable.DataTable（tableOptions）；
this.tableWidget.on（'select'，（e，dt，type，index）=>{
//我没在这里试过这个…没错