Opening a child grid on a particular page, jumps back to the first page.

mamta.kathar@apergy.com

Hello,

When I open a child grid on any page other than the first page on my data table, it automatically takes me back to the first page. The child grid does open, but I have to again click on the desired page number to view that page and row.
I tried to use stateSave and deferLoading, it did not help. I am not sure if I am doing the right thing.

Thanks a lot for your help in advance.

Please find the code below:

$('#example').on( 'click', 'input#datepicker',function (e){
$(this).datepicker();
} );
function format ( d, row ) {
// d is the original data object for the row

       var subgrid= $.ajax({
            url:'url.php',
            data:{order:d.OrderNumber, line:d.LineNumber, shipment:d.ShipmentNumber, release:d.ReleaseNumber, qty:d.QtyShipped, shipped:d.Shipped, index:row.index()},
            async:false,
            dataType:'json'
        });
       return subgrid.responseText;

    }

    $(document).ready(function(){


    var table = $('#example').DataTable( {
        ajax: "url.php",
        columns: [
            {
                className:'details-control',
                orderable:false,
                data: null,
                defaultContent: ''
            },
            { data: "OrderNumber" },
            { data: "LineNumber" },
            { data: "ItemNumber" },
            { data: "Qty" },
            { data: "Description" },
            { data: "Vendor" },
            { data: "BuyerName" },
            { data: "PromiseDate" },
            { data: "NeedByDate" },
            { data: "Received" },
            { data: "QtyDue" },
            { data: "Shipped",
                "type": "date",
                "dateFormat": "yy-mm-dd"}
           // { data: "Comments" }
            ],
        order: [[1, 'asc']],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
       //  stateSave: true,
      //  "deferLoading": 13499,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );



        function redraw()
        {
            var tr = $('.details-control').closest('tr');
            var row = table.row( tr );

                table.ajax.reload();
                row.child( format(row.data(), row) ).show();
                tr.addClass('shown');

        }

       // $('#example').on('click','.editable', convertToInput);
        $('#example').on('blur','.editable', txtBoxChanged);

        function convertToInput(event)
        {

        }

        function txtBoxChanged(event)
        {

        }


        function txtBoxSaveSuccess(jqxHR, textSuccess, errorThrown)
        {

        }




        function txtBoxSaveFail(jqxHR, textSuccess, errorThrown)
        {
           alert("qty failed!");
        }


        // Add event listener for opening and closing details
    $('#example tbody').on('click', '.details-control', function () {

        var tr = $(this).closest('tr');
        var row = table
            .row( tr )
            .invalidate()
            .draw();

        if ( row.child.isShown() ) {
            // This row is already open - close it
            table.ajax.reload();
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data(), row) ).show();
            tr.addClass('shown');
        }
    } );


    });
</script>

kthorngren

This code snippet is the problem:

        var row = table
            .row( tr )
            .invalidate()
            .draw();

Not sure why you are doing this but if you want to stay on the same page then use false in the draw() parameter to stay on the same page. Check out the docs for draw() for more details.

Kevin

mamta.kathar@apergy.com

Hello @kthorngren,

Thanks a lot for your help. You were right. I don't require to use that. I removed .draw() and it worked. Thanks for replying.