jQuery DataTable列搜索因翻译而中断

Question

We're using Jquery DataTable as our grid library. Whenever we initialize the DataTable everything works fine. Our application will support multiple locales, so obviously we want the grid to translate itself.

We're using the standard approach which we found in the documentation. The translation works as expected but the column search always return no results. When we comment out the language property the column search works.

The json files are copied directly from the CDN provided by the library.

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

Ok.. seems like it was just a "simple" case of a race-condition. The language was loaded too slow and meant that the search function could not find the correct controls to filter. Solved it by putting the search function in the initComplete property.

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