1

Tengo este codigo que da datatables para definir la variable table con el fin de hacer busquedas por cada columna:

La primera parte es la que inserta los input tipo texto, lo hace bien

$('#tblInvoice tfoot th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" class="form-control" placeholder="Search ' + title + 
    '">');
});

La otra parte del codigo, es la que envia la busqueda por cada columna, y es donde tengo el problema pues la variable table ya la tengo definida...

var table = $('#tblInvoice').DataTable();

table.columns().every(function() {
    var that = this;

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

he intentado colocar el codigo adentro junto con otros elementos de configuracion

var table = $('#tblInvoice').DataTable({
    table.columns().every(function() {
        var that = this;
        $('input', this.footer()).on('keyup change', function() {
            if (that.search() !== this.value) {
                that.search(this.value).draw();
            }
        });
    });
});

Pero NO funciona, como lo puedo hacer en jquery o javascript?

1 respuesta 1

1

LLeve el codigo a una funcion y pasele la defincion de la tabla...

function SetupColumnSearch(table) {
    /* Setup column-level search input fields. */
    $(table.table().header()).find('th').each(function() {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="' + title + '" 
        class="column_search form-control form-control-sm"/>');
    });

    table.columns().every(function() {
        var column = this;
        $('input.column_search', this.header()).on('keyup', function(e) {
            /* Avoid a DataTables bug where invisible columns show up */
            // if (e.type === 'keyup' && e.keyCode !== 10 && e.keyCode !== 13) return;
            if (column.visible()) {
                console.log(this.value);
                table.column(column.index()).search(this.value).draw(); // no funciona el draw() cuando serverSide=true TODO
                // table.ajax.reload(null, false);  // otra opcion TODO
            }
        });
    });
}

Funciono Perfecto!

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.