Question

这个很棘手，我会尽力解释自己。

简要说明：

我的Angular项目中集成了DataTables库，几个月前我购买了该项目的主题。主题已更新，因此我继续使用最新版本更新我的项目。

奇怪的是，什么不起作用的是DataTables，DataTables还没有改变！

代码细分：

从X组件我触发了我的共享服务IBOsService的方法。

触发此方法后，我的DatatableComponent会导入Promise中的数据表库。

直到现在，从未遇到过这方面的问题。

DatatableComponent：

this.tablesService.initTableData$.subscribe(() => {
                if (!this.datatableInitialized) {
                    log.info('Starting script import promise');

                    Promise.all([
                        System.import('script-loader!my-plugins/datatables-bundle/datatables.min.js')
                    ]).then(values => {
                        log.data('success', JSON.stringify(values));
                        this.render();
                    }, reason => {
                        log.error('error', JSON.stringify(reason));
                    });
                }
            }
        );

在我的控制台中，我看到：DataTables success [{}]。因此，我理解承诺是成功的。

然后我们输入this.render();方法。

这个方法一直持续到这一行：

const _dataTable = element.DataTable(options);

问题是，在我的IDE中，我可以导航到所有变量，方法等...但是我无法导航到DataTable()，因此我猜不会识别此方法，这就是它抛出错误的原因

但是，因为脚本是在promise中加载的，IDE通常没有DataTables方法的映射......

完整组件代码：

import { Component, Input, ElementRef, AfterContentInit, OnInit, Injectable, OnDestroy } from '@angular/core';
import { IBOsService } from '../../../+ibos/ibos.service';
import { Subscription } from 'rxjs/Subscription';
import { Log, Level } from 'ng2-logger';
import { logConfig } from '../../../../environments/log_config';

const log = Log.create('DataTables');
log.color = logConfig.dataTable;

declare let $: any;

@Component({

    selector: 'sa-datatable',
    template: `
        <table class="dataTable {{tableClass}}" width="{{width}}">
            <ng-content></ng-content>
        </table>
    `,
    styles: [
        require('my-plugins/datatables-bundle/datatables.min.css')
    ]
})
@Injectable()
export class DatatableComponent implements OnInit, OnDestroy {

    @Input() public options: any;
    @Input() public filter: any;
    @Input() public detailsFormat: any;

    @Input() public paginationLength: boolean;
    @Input() public columnsHide: boolean;
    @Input() public tableClass: string;
    @Input() public width = '100%';

    public datatableInitialized: boolean;

    public subscription: Subscription;

    constructor(private el: ElementRef, private tablesService: IBOsService) {
        this.tablesService.refreshTable$.subscribe((tableParams) => {
                this.filterData(tableParams);
            }
        );

        this.tablesService.initTableData$.subscribe(() => {
                if (!this.datatableInitialized) {
                    log.info('Starting script import promise');

                    Promise.all([
                        System.import('script-loader!my-plugins/datatables-bundle/datatables.min.js')
                    ]).then(values => {
                        log.data('success', JSON.stringify(values));
                        this.render();
                    }, reason => {
                        log.error('error', JSON.stringify(reason));
                    });
                }
            }
        );
    }

    ngOnInit() {
    }

    render() {
        log.info('Starting render!');

        const element = $(this.el.nativeElement.children[0]);
        let options = this.options || {};

        log.info('1 render!');

        let toolbar = '';
        if (options.buttons) {
            toolbar += 'B';
        }
        log.info('2 render!');

        if (this.paginationLength) {
            toolbar += 'l';
        }

        if (this.columnsHide) {
            toolbar += 'C';
        }

        log.info('3 render!');

        if (typeof options.ajax === 'string') {
            const url = options.ajax;
            options.ajax = {
                url: url,
                // complete: function (xhr) {
                //
                // }
            };
        }

        log.info('4 render!');

        options = $.extend(options, {

            'dom': '<\'dt-toolbar\'<\'col-xs-12 col-sm-6\'f><\'col-sm-6 col-xs-12 hidden-xs text-right\'' + toolbar + '>r>' +
            't' +
            '<\'dt-toolbar-footer\'<\'col-sm-6 col-xs-12 hidden-xs\'i><\'col-xs-12 col-sm-6\'p>>',
            oLanguage: {
                'sSearch': `<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span>`,
                'sLengthMenu': '_MENU_'
            },
            'autoWidth': false,
            retrieve: true,
            responsive: true,
            initComplete: (settings, json) => {
                element.parent()
                    .find('.input-sm')
                    .removeClass('input-sm')
                    .addClass('input-md');
            }
        });

        log.info('5 render! element', JSON.stringify(element));
        log.info('5.1 render! options', JSON.stringify(options));

        const _dataTable = element.DataTable(options);

        log.info('5.2 render! _dataTable', JSON.stringify(_dataTable));

        if (this.filter) {
            // Apply the filter
            element.on('keyup change', 'thead th input[type=text]', function () {
                console.log('searching?');
                _dataTable
                    .column($(this).parent().index() + ':visible')
                    .search(this.value)
                    .draw();
            });
        }

        log.info('6 render!');

        if (!toolbar) {
            element.parent().find('.dt-toolbar')
                .append(
                    '<div class="text-right">' +
                    '<img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;">' +
                    '</div>'
                );
        }

        log.info('7 render!');

        if (this.detailsFormat) {
            const format = this.detailsFormat;
            element.on('click', 'td.details-control', function () {
                const tr = $(this).closest('tr');
                const row = _dataTable.row(tr);
                if (row.child.isShown()) {
                    row.child.hide();
                    tr.removeClass('shown');
                } else {
                    row.child(format(row.data())).show();
                    tr.addClass('shown');
                }
            });
        }

        log.info('8 render!');

        this.datatableInitialized = true;
    }

    filterData(tableParams) {
        console.log('reloading DT... With these parameters: ' + JSON.stringify(tableParams));

        const element = $(this.el.nativeElement.children[0]);
        const table = element.find('table.dataTable');

        log.data('current table element is: ', JSON.stringify(table));

        Object.keys(tableParams).forEach(function (key) {
            log.warn('current key: ', JSON.stringify(key));
            table.DataTable().column(`${key}:name`).visible(tableParams[key]);
        });

        table.DataTable().ajax.reload();
    }

    ngOnDestroy() {
        if (this.subscription) {
            this.subscription.unsubscribe();
        }
    }
}

你会看到我已经使用日志入侵了组件，它帮助我了解组件失败的位置。

完整控制台日志：

有趣的信息：

如果我调用filterData(tableParams)方法... DataTable呈现没有问题。

这告诉我两件事：

DataTable()不是问题。
问题仅在第一次渲染时，然后，在更新时，我没有遇到任何问题。

我非常抱歉我的文字墙 ...但是我自己做了一些夏洛克福尔摩斯并找不到解决办法。

如果您需要澄清或更多详情，请告诉我。

提前致谢！

更新

经过几天的调试，我发现了一个可能的错误来源：

问题是s是null。

也许在DataTables上有经验的人或遇到过这个问题的人可能会给我一些关于发生了什么的提示。

我会在这里调试......;）

更新2：

经过更多调试后，我发现DataTables 没有进行第一次Ajax调用。

我正在使用服务器端DataTables，在POST中调用Ajax。

以下是我的options对象的代码：

this.options = {
    dom: 'Bfrtip',
    processing: true,
    serverSide: true,
    pageLength: 20,
    searchDelay: 1200,
    ajax: {
        url: this.jsonApiService.buildURL('/test_getUsers.php', 'remote'),
        type: 'POST',
        data: function (d) {
            Object.assign(d, IBOsTable.params);
            log.data('DT options obj. New params are: ', JSON.stringify(IBOsTable.params));
            return d;
        }
    },
    columns: this.initColumns,
};

这个没有在初始化时调用Ajax ，而是在table.DataTable().ajax.reload();上进行调用。

这告诉我代码不正确或损坏（reload()就像魅力一样）......

我仍然没有完全不理会为什么这个DataTables的初始化不起作用......但我相信我足够接近了！

Answer 1

我终于找到了错误的来源！

如果您阅读我的更新，您会发现我发现我的DataTables没有进行第一次Ajax调用，但在reload()上工作正常：

这是因为初始化中的JavaScript错误不允许进行Ajax调用。提示： TypeError：无法读取null 的属性'nodeName'。

在speaking to Allan (from DataTables)之后，他向我提示可能由于thead的列数不等于tbody的列数而导致错误。

所以我检查了我的.html，发现我有一些空的<thead>和<tfoot>标签。我评论他们......并且工作了！

我已经遍历了所有可能的解决方案：

依赖关系
Angular 2 App中的jQuery库
实现DataTable服务器端的许多不同方式
更改代码中的方法：TypeScript，jQuery，Ng2等......

最后，我只需要清除加载DataTable的div，以避免出现此问题。

有趣的事实：有了这个.html我的应用程序工作了3/4个月没有任何问题，直到现在没有DataTables的问题......

Angular - Datatables：TypeError：无法读取null

1 个答案: