datatables search always returns zero rows with dynamically generated rows

recci

I have a datatable set up in an application where the rows contain input fields and I have sort and filter the tables based on the text values of the input fields. I managed to get sorting working correctly but I cannot for the life of me get search to work. I think the problem is related to the fact that the table is generated and populated dynamically by another javascript that runs prior to datatables being called on it.

here is the javascript so far:

```
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.order["dom-text"] = function ( settings, col )
{
return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
return $("input", td).val();
} );
}

/* Create an array with the values of all the input boxes in a column, parsed as numbers */
$.fn.dataTable.ext.order["dom-text-numeric"] = function  ( settings, col )
{
    return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
        return $("input", td).val() * 1;
    } );
}

/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.order["dom-select"] = function  ( settings, col )
{
    return this.api().column( col, {order:"index"} ).nodes().map( function ( td, i ) {
        return $("select", td).val();
    } );
}


    $(document).ready(function() {

    var table =  $("#service_group0").DataTable({
            "searching": true,
            "ordering":  true,
            "columns": [
                { "orderDataType": "dom-text", type: \'html\' },
                { "orderDataType": "dom-select",type: \'html\' },
                { "orderDataType": "dom-text" , type: \'string\'},
                { "orderDataType": "dom-text", type: \'string\' },
                { "orderDataType": "dom-text", type: \'string\'},
                { "orderDataType": "dom-select" },
                { "orderDataType": "dom-select" },
                { "orderDataType": "dom-text-numeric"},
               { "orderDataType": "dom-text", type: \'date\'},
                null,
                { "orderDataType": "dom-select" },
                { "orderDataType": "dom-text-numeric"},
                { "orderDataType": "dom-select" },
                { "orderDataType": "dom-text", type: \'string\' },
                { "orderDataType": "dom-text", type: \'string\' },
                { "orderDataType": "dom-text", type: \'date\'},
                null,
                null
            ],
            initComplete:   function () {
                this.api().columns().every( function () {
                    var column = this;
                     if(column.index() == 5){
                        var select = $("<select id=\'strength_search\'></select>")
                            .appendTo( $(column.footer()).empty());
                            var strength_hidden = document.getElementById("strength_hidden").value;
                            select.append(strength_hidden);
                    }
                    else if(column.index() == 6){
                         var select = $("<select id=\'dose_search\'></select>")
                            .appendTo( $(column.footer()).empty());
                            var dose_hidden = document.getElementById("dose_hidden").value;
                            select.append(dose_hidden);
                    }
                });
            }
        }); ```

There is simply to much html to paste here so I have created a jsfiddle: http://jsfiddle.net/q715LncL/12/

If you go to the jsfiddle and type stuff into the empty text fields then go to the search box and try to filter based on something you typed in it always returns no results. How can I get it to filter on the changes made to the live inputs?

recci

If I try to refersh the cache I get a type error:

table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this.invalidate();

            });

TypeError: b.getAttribute is not a function

gyrocode

This issue has been recently corrected, see it on github. I answered your question on StackOverflow.

recci

Thanks I seen your answer and have replied on stackoverflow.

Your answer has helped a lot and seems to work for the most part but when I use it in my actual application if I load in rows with values in the input fields it seems to clear them. Im not sure I fully understand how your code works. When table is generated and populated dynamically by the other script some of the rows will already have data in them so it need to work with both and allow sorting with live and existing date in the input fields.

recci

I still desperately need help with this!

I have updated my code on this fiddle: http://jsfiddle.net/v7rjqogy/15/

Two things are wrong with it. First:

When I add a new line and then fill in some text into the input how do I get this to work with the search function?

Secondly (this one is more important)

You’ll notice that I have added a custom Filter by: Strength: and By Dose drop downs at the top of the page. These correspond with the columns Strength and Dose in the table. I have added code to get it to search by these but it always show no rows returned.

I am exasperated trying to get this to work!