Jquery DataTable 列搜索中断翻译答案

【问题标题】：Jquery DataTable column search breaking with translationsJquery DataTable 列搜索中断翻译
【发布时间】：2017-04-21 11:59:58
【问题描述】：

我们使用 Jquery DataTable 作为我们的网格库。每当我们初始化 DataTable 时，一切正常。我们的应用程序将支持多种语言环境，因此显然我们希望网格能够自行翻译。

我们正在使用我们在文档中找到的标准方法。翻译按预期工作，但列搜索始终不返回任何结果。当我们注释掉语言属性时，列搜索就起作用了。

json文件直接从库提供的CDN复制而来。

var locale = $('#locale').text();

var advance = $('#advanced-table').DataTable( {
    dom: 'Bfrtip',
    // language: {
    //     'url': '/assets/js/translations/datatable/' + locale + '.json'
    // }, <- this is causing the column search to break
    responsive: true,
    autoWidth: false,
    buttons: [
        {
            extend: 'excel',
            exportOptions: {
                columns: 'thead th:not(.no-sort)'
            }
        },
        {
            extend: 'pdf',
            exportOptions: {
                columns: 'thead th:not(.no-sort)'
            }
        },
        {
            extend: 'print',
            exportOptions: {
                columns: 'thead th:not(.no-sort)'
            }
        }
    ]
});

$('#advanced-table tfoot th').each(function() {
    var title = $(this).text();
    $(this).html('<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="' + translator.get('datatable.search') + " " + title + '" /><span class="md-line"></span></div>');
});

advance.columns().every(function() {
    var that = this;

    $('input', this.footer() ).on('keyup change', function () {
        if (that.search() !== this.value) {
            that
                .search(this.value)
                .draw();
        }
    });
});

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

好的.. 看起来这只是一个“简单”的竞争条件案例。语言加载太慢，意味着搜索功能无法找到要过滤的正确控件。通过将搜索功能放在 initComplete 属性中解决它。

var locale = $('#locale').text();

var advance = $('#advanced-table').DataTable( {
    dom: 'Bfrtip',
    language: {
        'url': '/assets/js/translations/datatable/' + locale + '.json'
    },
    responsive: true,
    autoWidth: false,
    buttons: [
        {
            extend: 'excel',
            exportOptions: {
                columns: 'thead th:not(.no-sort)'
            }
        },
        {
            extend: 'pdf',
            exportOptions: {
                columns: 'thead th:not(.no-sort)'
            }
        },
        {
            extend: 'print',
            exportOptions: {
                columns: 'thead th:not(.no-sort)'
            }
        }
    ],
    initComplete: function () {
        advance.columns().every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function() {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            });
        });
    }
});

$('#advanced-table tfoot th').each(function() {
    var title = $(this).text();
    $(this).html('<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder="' + translator.get('datatable.search') + " " + title + '" /><span class="md-line"></span></div>');
});

【讨论】：