table.columns().search(form value).draw() doesn't match anything

sharkantropo

Greetings.

I have the following script for a datatables implementation on my code.

 function format ( d )
    {
        // `d` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
            '<td>Nombre completo:</td>'+
            '<td>'+d.nombre+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td>Correo:</td>'+
            '<td>'+d.correo+'</td>'+
            '</tr>'+
            '<tr>'+
            '<td>Extra info:</td>'+
            '<td>...</td>'+
            '</tr>'+
            '</table>';
    }

    $(document).ready(function() {

        // Setup - add a text input to each footer cell
        $('#tabla1 tfoot th').each( function () {
            const title = $(this).text();
            if(title == 'Nombre'||title == 'Correo' )
            {
                $(this).html('<input type="text" placeholder="Buscar ' + title + '" />');
            }
        } );

        let table = $('#tabla1').DataTable(
            {
                data: null,
                columns: [
                    {
                    "className":      'details-control',
                    "orderable":      false,
                    "data":           null,
                    "defaultContent": '',
                    "searchable": false
                },
                    { data: "nombre", "searchable": true },
                    { data: "correo", "searchable": true},
                    { data: "roles",
                    "searchable": false},
                    { data: "permisos",  "searchable": false },
                    { data: "acciones",  "searchable": false }
                ],
                "language": {
                    "url": "MaterialAdminLTE-master/bower_components/datatables.net/Spanish.json"
                }
            }
        );
        // Add event listener for opening and closing details

        $('#tabla1 tbody').on('click', 'td.details-control', function ()
        {
            let tr = $(this).closest('tr');
            let row = table.row( tr );
            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
            }
        } );

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

The generated table has 5 columns, which only two are intended to be searchable, and also are the only columns with form inputs at the footer added through .each() method (included "searchable": false to the other columns). Regardless I write on my search inputs, nothing matches, even considering I restricted the search within the two columns I've already mentioned with "searchable": true (It's redundant but added it for clarity purposes).

I also tried adding a ClassName to the elements that contain the columns, something like table.columns(".filtered") yet it was for naught: It only matches a few characters and both form inputs overwrites each other search results.

colin

Hi @sharkantropo ,

This example here has something similar, and it's working there, it's hard to diagnose your code without seeing a live example.

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

sharkantropo

Hello @colin ,

Of course, here's a rough implementation of my table. Go ahead and try the search forms, also change table.columns().every for table.columns(".filtered").every, to see them working improperly.

Thanks in advance.

Regards

allan

Because you are using language.url the initialisation of the table is async. You need to thus initialise the column filter in initComplete: http://live.datatables.net/lijidene/2/edit .

Allan