Question

我们使用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();
        }
    });
});

Answer 1

好吧..好像它只是一个简单的＆＃34;比赛条件。语言加载速度太慢，意味着搜索功能无法找到要过滤的正确控件。通过将搜索函数放在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>');
});

Jquery DataTable列搜索打破了翻译

1 个答案: