I have created subgrid for each row, however pagination of subgrid is not working

vikas29

code for show or hide subgrid

$('#exampleEditor tbody').on('click', 'td.details-control', function () {

            var tr = $j(this).closest('tr');
            var row = editorTable.row( tr );


            if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                $j("#subgrid"+(row.data().column1).trim()).DataTable().destroy(false);

                $j("#subgrid"+(row.data().column1).trim()).css("display","none");
            }
            else {
                // Open this row
               format(row,tr,(row.data().column1).trim());
            }

        } );

code to create subgrid

function format ( row, tr,index ) {

        if($("#subgrid"+index).length == 0)
        {
            $("body").append(getTable(index));
        }

        subgridTable = $("#subgrid"+index).DataTable({
            "processing": true,
            "serverSide": true,
            "orderMulti": true,
            "ajax": "serverURL",
            "columns": [
                { "data": "ordernumber","width": "10%"},
                { "data": "part","width": "2%" },
                { "data": "quantity","width": "1%" },
                { "data": "duedate","width": "2%" },
                { "data": "datebinstart","width": "37%" },
                { "data": "shiftbinstart","width": "46%" },
                { "data": "weekbinstart","width": "28%" }
            ],
            "columnDefs":[
                {
                    "targets": [ 4,5,6 ],
                    "visible": false
                }],

            initComplete: function(){

              //Code to hide subgrid html table till response is arrived
                $("#subgrid"+index+"_wrapper").css("display","none");
                $("#subgrid"+index).css("display","");

               //need to use set timeout function as the response takes some time
                setTimeout(function(){ row.child( $j("#subgrid"+index+"_wrapper").html()) .show();
                    tr.addClass('shown'); }, 3000);

            }
        });

    }

    function getTable(index)
    {
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" id="subgrid'+index+'">'+
            '<thead>'+
            '<tr>'+
            '<th>Order Number</th>'+
            '<th>Part</th>'+
            '<th>Quantity</th>'+
            '<th>Due Date</th>'+
            '<th>datebinstart</th>'+
            '<th>shiftbinstart</th>'+
            '<th>weekbinstart</th>'+
            '</tr>'+
            '</thead>'+
            '</table>';
    }

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

vikas29

hi colin
I have created an example where I can recreate the issue I have mentioned. Please have a look. Below is the link of the same:
http://live.datatables.net/yipevace/3

just to describe the issue:
I have shown a sub grid for each row. When a row is clicked the sub grid will get opened. I have used javascript setTimeout function which provides some time for sub grid to load, don't know why it takes a while to be loaded.
Until this it is working fine. But pagination on sub grid is not working also it doesn't show any error.

colin

The format function is intended to add HTML to the row - whereas your code is initialising a table without adding it. It would be worth looking at this example from this thread as it is doing what you're trying to achieve.

Colin

vikas29

hi colin
I have implemented your suggestions and those have resolved my issues.
thanks