Individual column search (text inputs) in editor does not work

sesimon

Hallo everyone,

I am almost ready with my table in editor. Inline editing works, the search field above also works, but I want to apply individual column search using text inputs. I can see the text inputs, but the search does not work. I found some posts in the forum, but they did not really help me, because there was no extract from the javascript.
If I do not use editor, it just works perfectly.

Can someone please please check the code?

var editor; 
 
$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        ajax: "php/table.eb.php",
        table: "#eb",
         fields: [
                    {
                        "label": "s:",
                        "name": "s",
                        "type": "readonly"
                    },
                    {
                        "label": "Artikelnummer:",
                        "name": "artikelnummer",
                        "type": "readonly"
                    },
                    {
                        "label": "EB Bezeichnung:",
                        "name": "ebbez"
                    },
                    {
                        "label": "Zusatztext-1:",
                        "name": "ebzusatz"
                    },
                    {
                        "label": "Bezeichnung:",
                        "name": "bezeichnung",
                        "type": "readonly"
                    },
                    {
                        "label": "Zusatz:",
                        "name": "zusatz",
                        "type": "readonly"
                    },
                    {
                        "label": "Größe:",
                        "name": "groesse",
                        "type": "readonly"
                    },
                    {
                        "label": "Bearbeitung:",
                        "name": "bearbeitung",
                        "type": "readonly"
                    },
                    {
                        "label": "Herkunft:",
                        "name": "herkunft",
                        "type": "readonly"
                    },
                    {
                        "label": "Farbe:",
                        "name": "farbe",
                        "type": "readonly"
                    }
                ]
    } );

    $('#eb').on( 'click', 'tbody td:not(:first-child)', function (e) {
                editor.inline( this, {
                onBlur: 'submit'
                } );
    } );
    $('#eb tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );    

    
    $('#eb').DataTable( {
        dom: "Bfrtip",
        ajax: 'php/table.eb.php',
        order: [[ 1, 'asc' ]],
        columns: [
                    {
                        "data": "s"
                    },
                    {
                        "data": "artikelnummer"
                    },
                    {
                        "data": "ebbez"
                    },
                    {
                        "data": "ebzusatz"
                    },
                    {
                        "data": "bezeichnung"
                    },
                    {
                        "data": "zusatz"
                    },
                    {
                        "data": "groesse"
                    },
                    {
                        "data": "bearbeitung"
                    },
                    {
                        "data": "herkunft"
                    },
                    {
                        "data": "farbe"
                    }
                ],
                select: true,
                lengthChange: false
    } );
    table.columns().every( function () {
        var that = this;

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

allan

Move your table.columns().every()... code into an initComplete callback. The issue is most likely to do with the table loading async data. If that doesn't resolve it, can you link to a page showing the issue please?

Allan

sesimon

works perfect doing this ... thanks a lot allan!

        initComplete: function () {
            this.api().columns().every( function () {
                var that = this;

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