0

Se implementó el filtro individual por columna y además la suma de las cantidades de una de ella al pie de tabla. Funciona, pero cada que cargo las tablas me sale: DataTables warning: table id=domingo2 - Cannot reinitialise DataTable

He leído y la ayuda e indican que ese error es porque se a inicializado más de una vez #id.DataTable. Y sugieren utilizar una función destroy().

Tengo inicializado dos veces porque en una cargo el Footer Callback y en otra los filtros individuales. Si los junto en un solo llamado chocan y no funcionan ambas rutinas. La pregunta es, he revisado y no se como meter ambas rutinas en un solo llamado del DataTable para que funcione. El codigo es el siguiente:

1er LLamado con la rutina del Footer Callback (Total de la suma, columa)

$(document).ready(function() //TABLA PRELIBRO
    {
        $('#domingo3').DataTable(
        {
            "footerCallback": function ( row, data, start, end, display )
            {
                // $(tfoot).find('th').eq(0).html( "Starting index is "+start );
                var api = this.api(), data;

                // Remove the formatting to get integer data for summation
                var intVal = function ( i )
                {
                    return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
                };

                // Total over all pages
                total = api
                    .column( 2 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                // Total over this page
                pageTotal = api
                    .column( 2, { page: 'current'} )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

                // Update footer
                pageTotal = Intl.NumberFormat('es-419').format(pageTotal); //CONVENTIR A MONEDA
                total = Intl.NumberFormat('es-419').format(total); //CONVENTIR A MONEDA
                $( api.column( 2 ).footer() ).html(
                    '$'+pageTotal +' ( $'+ total +' Monto Total)'
                );
            }

        });
    });

2do Llamado colocando a la misma tabla los filtros individuales

$(document).ready(function() //FILTRO TABLA PRELIBRO
    {
        // Setup - add a text input to each footer cell
        $('#domingo3 thead tr').clone(true).appendTo( '#domingo3 thead' );
        $('#domingo3 thead tr:eq(1) th').each( function (i) 
        {
            var title = $(this).text();
            $(this).html( '<input type="text" style="float: center;" id="SearchTable2" placeholder="Filtro" />' );

            $( 'input', this ).on( 'keyup change', function () 
            {

                if ( table.column(i).search() !== this.value ) 
                {
                    table
                    .column(i)
                    .search( this.value )
                    .draw();
                }
            });
        });
        var table = $('#domingo3').DataTable(
        {
            orderCellsTop: true,
            fixedHeader: true
        });
    });

Gracias, espero puedan apoyarme.

1 respuesta 1

0

Muy buen día:

La solución es más simple, leyendo la documentación llegue a la conclusión de que a mi código le falta una coma, esto se debe cuando se añaden más opciones al dataTable. Quedaría de la siguiente manera:

var table = $('#domingo3').DataTable(
        {
            orderCellsTop: true,
            fixedHeader: true,
        });

Para aquellos que tengan un problema similar, esta es la solución.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.