TypeError: (...). Draw не является функцией при попытке отфильтровать данные

Question

Я пытаюсь создать таблицу данных, которую можно отфильтровать по диапазону данных.Работает в основном все, кроме того, что выдает исключение при попытке обновить таблицу после изменения полей даты.Вот мой код:

tablas.js :

tablaTransacciones  = $('#tabla-transacciones');

$(document).ready( function () {
    tablaTransacciones.DataTable({
        "dom": '<"top"i>frt<"bottom">p<"clear">',
        "info":     false,
        "ordering": true, 
        "order": [[ 0, "desc" ]],
        "pagingType": "simple_numbers",
        "lengthChange": false,
        "pageLength": 4,
        "fixedHeader": true,
        "language": {
            "searchPlaceholder": "Buscar registro",
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     '<i class="fas fa-angle-right"></i>',
                "sPrevious": '<i class="fas fa-angle-left"></i>',
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
    });

    yadcf.init(tablaTransacciones, [{
        column_number: 0
    }]);
});

$.fn.dataTableExt.afnFiltering.push(
    function( settings, data, dataIndex ) {
        var min  = $('#min-date').val()
        var max  = $('#max-date').val()
        var createdAt = data[0] || 0;
        var diffDate = moment(createdAt);
        min = moment(min).subtract('1','days');
        max = moment(max).add('1','days');
        if (
        (min == "" || max == "") ||
        (diffDate.isBetween(min, max))


        ) {  return true;  }
        return false;

    }
);

$('#min-date').change(function() {
    tablaTransacciones.draw();
});

$('#max-date').change(function() {
    tablaTransacciones.draw();
});

Когда я нажимаю и изменяю дату, я действительно получаю событие, но консоль выдает следующееошибка:

Ошибка типа: tablaTransacciones.draw не является функцией [Aprender más] tablas.js: 69: 5

Если я что-то наберу в фильтре по умолчанию, ядействительно получаю отфильтрованную таблицу, которую я хочу.

Есть идеи, что здесь происходит?

РЕДАКТИРОВАТЬ: я использую ввод даты вместо ввода простого текста в HTML.Вот почему я полагаюсь на событие изменения.

Answer 1

tablaTransacciones - это объект JQuery, а не ссылка на объект DataTables.Так что «рисовать», вероятно, не существует.Когда вы установите данные, захватите результат.Например,

var myTable = $('#myTable').DataTable(); 

- теперь существует myTable.draw ().

Вот пример вашего кода, где я создаю отдельный объект для DataTables, который называется «tablaTransacciones_dt».Этот объект используется для перерисовки таблицы после внесения изменений.

tablaTransacciones  = $('#tabla-transacciones');

tablaTransacciones_dt = null;

$(document).ready( function () {
    tablaTransacciones_dt = tablaTransacciones.DataTable({
        "dom": '<"top"i>frt<"bottom">p<"clear">',
        "info":     false,
        "ordering": true, 
        "order": [[ 0, "desc" ]],
        "pagingType": "simple_numbers",
        "lengthChange": false,
        "pageLength": 4,
        "fixedHeader": true,
        "language": {
            "searchPlaceholder": "Buscar registro",
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     '<i class="fas fa-angle-right"></i>',
                "sPrevious": '<i class="fas fa-angle-left"></i>',
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
    });

    yadcf.init(tablaTransacciones, [{
        column_number: 0
    }]);
});

$.fn.dataTableExt.afnFiltering.push(
    function( settings, data, dataIndex ) {
        var min  = $('#min-date').val()
        var max  = $('#max-date').val()
        var createdAt = data[0] || 0;
        var diffDate = moment(createdAt);
        min = moment(min).subtract('1','days');
        max = moment(max).add('1','days');
        if (
        (min == "" || max == "") ||
        (diffDate.isBetween(min, max))


        ) {  return true;  }
        return false;

    }
);

$('#min-date').change(function() {
    tablaTransacciones_dt.draw();
});

$('#max-date').change(function() {
    tablaTransacciones_dt.draw();
});