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

当我单击并更改日期时，确实确实派发了该事件，但控制台抛出以下错误：

TypeError：tablaTransacciones.draw不是函数[报告人] tablas.js：69：5

如果在默认过滤器上键入内容，则确实可以得到所需的过滤表。

对这里发生的事情有任何想法吗？

编辑：我使用的是日期输入，而不是html上的纯文本输入。这就是为什么我依赖更改事件。

Answer 1

tablaTransacciones是一个JQuery对象，而不是对DataTables对象的引用。因此，“绘制”可能不存在。建立数据表时，捕获结果。例如

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

-现在myTable.draw（）存在。

这是您的代码示例，其中为DataTable创建了一个单独的对象，称为“ 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();
});

尝试过滤数据表时，TypeError：（...）。draw不是函数

1 个答案: