Details row works for showing 10 records, but does not work for showing more records

mav1

Hi. I have a table, where some rows are parents and they have one child row "details". I make this row after the table is loaded with jquery like:

var nCloneTh = document.createElement( 'th' );
               var nCloneTh1 = document.createElement( 'th' );
    var nCloneTd = document.createElement( 'td' );
    var nCloneTd1 = document.createElement( 'td' );
    nCloneTd.innerHTML = '<img src="/oc/stock/images/plus.png">';
    nCloneTd1.innerHTML = ' ';
    nCloneTd1.className = "txtCenter";
    nCloneTd.className = "txtCenter";
     
    $('#fileData thead tr.children').each( function () {
        this.insertBefore( nCloneTh, this.childNodes[0] );
    } );
     
    $('#fileData tbody tr.children').each( function () {
        this.insertBefore(  nCloneTd.cloneNode( true ), this.childNodes[0] );
    } );
           
     
    $('#fileData tbody tr:not(.children)').each( function () {
        this.insertBefore(  nCloneTd1.cloneNode( true ), this.childNodes[0] );
    } );     
          
           
           
           
           function fnFormatDetails (table, nTr)
{
     sOut2 = 'some details'; 
    return sOut2;
}
           
            $('#fileData tbody td img').live('click', function () {
        var nTr = $(this).parents('tr')[0];
        if ( table.fnIsOpen(nTr) )
        {
            /* This row is already open - close it */
            this.src = "/oc/stock/images/plus.png";
            table.fnClose( nTr );
        }
        else
        {
            /* Open this row */
            this.src = "/oc/stock/images/minus.png";
            table.fnOpen( nTr, fnFormatDetails(table, nTr), 'details2' );
        }
    } ); 
           
           
                
         } );      

Everything is ok, when 10 rows is shown, but if i select 25 or 50 or "all", other rows (11 and next) will not show the first column (see pictures).

What is wrong?

kthorngren

I make this row after the table is loaded with jquery like:

The problem is that the code you are using to add the child details controls is only applied to the initial table display of 10 rows. The remaining rows are not in the DOM when your code is applied so they never get the controls.

Not sure why you are doing it this way except it looks like there are conditions where you don't want the child detail controls. You will be better off using the code in the example to build the child detail control then remove the control if needed using createdRow. Here is an example that uses this technique on rows with empty extn data:
http://live.datatables.net/pifugoki/1/edit

Kevin

mav1

Thank you for the reply.

I've tried another solution, there is such thing as fnSettings, and as i can understand , i can redraw my table (after it is loaded with ALL (-1) rows) with using something like "oSettings.iDisplayLength = 10" and fnDraw() function. Something like this example:

<script>
$(window).resize(function () {
var oSettings = table.fnSettings();
oSettings.iDisplayLength = 10;
table.fnDraw();
});
</script>

My table is realy called "table" and now it is initialized with var table = $('#fileData').dataTable( { ........,"iDisplayLength": -1,........ }); before this code. But nothing happens when i change the window size. Where is the mistake?

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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