Как использовать поиск нижнего колонтитула при использовании jquery datatable с ajax удаленным ресурсом

Question

Я использую datatable с данными на стороне сервера, вот мой код js:

$(document).ready(function() {
    $('table#myID').DataTable( {
        "paging": true,
        "searching":     true,
        "lengthChange" : true,
        "info" : true,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/my/ajax/resource",
            "dataType": "json",
            "type": "POST"
        },
         "columns": [
            { "data": "abc" },
            { "data": "def" },
            { "data": "ghik" }
        ]
    });
    var tablebd = $('#myID').DataTable();
    tablebd.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            alert('abc');
            if ( that.search() !== this.value && this.value.length > 3 ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
}); 

Загрузка данных прошла успешно. Но я не мог искать по вводу нижнего колонтитула. Я думаю, что вводу нижнего колонтитула не было назначено событие 'keyup change', так как 'alert' никогда не вызывался, когда я вводил ввод нижнего колонтитула. Были ли проблемы с asyn c? или я что-то не так сделал?

Answer 1

Я обнаружил проблему, определение событий нижнего колонтитула должно быть помещено в initComplete, например:

$(document).ready(function() {
$('table#myID').DataTable( {
    "paging": true,
    "searching":     true,
    "lengthChange" : true,
    "info" : true,
    "processing": true,
    "serverSide": true,
    "ajax": {
        "url": "/my/ajax/resource",
        "dataType": "json",
        "type": "POST"
    },
     "columns": [
        { "data": "abc" },
        { "data": "def" },
        { "data": "ghik" }
    ],
    initComplete: function () {
        this.api().columns().every( function () {
            var that = this;

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

Это работает для меня!