Datatables Expander Not Working Using Example Supplied

harjmankoo

Hi All,
Using example https://datatables.net/examples/api/row_details.html but this absolutely does not work for me. I am using ajax server-side code to bring data in and followed the the example but the buttons do not show. The only time they show is if I stick in responsive: true. Also tr.removeClass and tr.addClass does not work ie class is not being added or removed.
Please let me know if you need more information.

My Code
function loadBookPO()
{
mytable = $('#BookPOTable').DataTable( {
processing: true,
serverSide: true,
ajax: {
url: "getJSONData.php",
type: "GET",
data: {"0": "BookPO",

            },
        },
        columns: [
            { data: "VendorName" },
            {
            className:'details-control',
            orderable: false,
            data: null,
            defaultContent: ''
            },
            { data: "Job" }




        ],
        searching: false,
        paging: true,
        pageLength: 10,
        ordering:  true,
        lengthChange: false,
        info: true,
        select: {
            style: "single"
        },
        columnDefs: [
            {
               targets: [ 0 ],
               visible: false,
               searchable: false                  
            }

        ],
        drawCallback: function ( settings ) {
            var api = this.api();
            var tableRows = api.rows( {page:'current'} ).nodes();
            var lastSub = null;
            api.column(0, {page:'current'} ).data().each( function ( mySubGroup, i ) {                                
                if (lastSub !== mySubGroup) {
                    $(tableRows).eq(i).before('<tr class="subgroup"><td colspan="12">'+ mySubGroup +'</td></tr>');          
                    lastSub = mySubGroup;  
                }
            } );
        },


    })

    // Add event listener for opening and closing details
$('#BookPOTable tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = mytable.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');
    }
} );

} // function loadBookPO

colin

Hi @harjmankoo ,

On that link you posted, you'll notice those icons in the first column are controlled by CSS (check the CSS tab). You'll need to have those included in your page too for them to be seen.

Cheers,

Colin

harjmankoo

Hi Colin,
Thanks for the reply. I couldnt see the icons and panicked :-). When I clicked the empty column the child row did open up. So I added the following in my css
td.details-control {
background: transparent url(../images/details_open.png) no-repeat center center;
}

tr.shown td.details-control {

background: transparent url(../images/details_close.png) no-repeat center center;

}

As you may have gathered I a m new to datatables. But one thing I have learnt is that there are 1000's of examples of how to use datatables but some clash with each other. The trick is to suss out which one clashed with what. My addclass etc didnt seem to work as it was clashing with responsive:true which I had set on the datatble. As soon as I removed that and realised my icons were missing due to not setting the css it all clicked into place.
Thanks again