childrow iframe getting refreshed once search function is used

BrunoB

hello, I am using the Child Rows feature and so far I am very happy with it. The problem I have is that as soon as the child row is open and I type something in the search function, the iframe is updated every time. If I have multiple child rows open, they are refreshed as well, resulting in unnecessary calls of this iframe.

Is there a simple solution so that when I use the search function the iframe inside the child row is no longer refreshing?

Many thx for all the support and hints.

evidence: http://live.datatables.net/yogipise/1/edit

colin

You have this code in your example:

    table.on('search.dt', function() {
        table.rows('.shown').every(function(rowIdx, tableLoop, rowLoop) {
            this.child(format(this.data()));
            this.child().highlight($(table.search().split(/\s+/)));
        });
    });

Every time a search is made, you scan all the records with an opened child row, and call the format function for it - this is causing it to flash and be redrawn.

Colin

BrunoB

thx @colin for your update and support. but by removing this code (mentioned above) the iframe gets still refreshed. so from my understanding, this can not be the cause. thx for your further support.

kthorngren

I suspect the problem is that Datatables refreshes the open child rows on each draw. That plus the fact your are calling row().child() in the search event will cause the iframe to reload - causing the flash.

There are lots of discussions about hiding the iframe while loading to stop the white flash, like this technote. However I'm note sure there is a good solution to stop the flashing when the child row is open. Maybe others will have ideas.

Not sure what you are displaying in the iframe. I wonder if there is a different way you can display the data.

Kevin

BrunoB

@kthorngren (kevin), thx for the reply and support.
the reason is that i'm calling an existing page. the data will be loaded depending on the delivered id information (after opened the child row)

example: function format (d) =>
iframe id="ifrm'+d[13]+'" src="https:/xxxxx/id='+d[13]+'"

the solution itself is great.. just did not like that when I'm typing something in the search function that the iframe get reloaded and reloaded

i tried the solution provided but the iframe is not loading anymore...

kthorngren

Maybe you can do something like this Ajax Loaded Child Rows example.

You will see the problem when doing anything that causes a table draw. For example change the page length and you will see the flashing. Its just not searches although that causes the problem to happen more often.

Kevin

BrunoB

@kthorngren thx for the reply!
i tried with ajax but then i got stuck, for this reason, I used this way,

im just wondering as the search does not search the data in the iframe nor in the ajax solution but only on the parent row... is there a way to block the child row search?

allan

iframes are a little unique here and they will unfortunately have the issue you mention. The way DataTables' draw works is to assemble the rows into a document fragment and insert that into the DOM when all rows are ready. The child row code then spins over the rows and will re-insert any child rows required. This is all done for performance reasons.

Unfortunately, with an iframe that means it is getting reinserted each draw, which in turn means the browser is going to be requesting the data again.

I'm afraid that there is no way around that in DataTables.

Allan

BrunoB

@allan thx. for the reply and support.