Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82694

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

$
0
0

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>';
    }

Viewing all articles
Browse latest Browse all 82694

Trending Articles