jQuery DataTable - all records are not displayed when placed in bootstrap modal dialog

Question

I am trying to display data in jquery datatable which is placed in a bootstrap modal dialog but, for some reason, I am not able to see all the data. The jquery datatable is enabled with scroller instead of paging to display large data.

JS Bin: http://live.datatables.net/pujowuqo/2/edit

Issue and Reproduction Steps:

a. Launch the JS Bin b. Do not resize the page c. Click on launch demo modal button d. Try to scroll and see the data. e. The data will be displayed partially and finally some of the records are missing

Observation:

If I resize the page, then all the data started displaying. I don't want to trigger window resize as it will affect other places in my project.

JS:

$(document).ready( function () { 


  var table = $('#example').DataTable({
    deferRender: true,
    scrollY: '50vh',//setting fixed height also does not work
    scrollX: true,
    scroller: true,
    scrollCollapse: true,
    searching: false,
    paging: true,
    info: false,
    columns: [
      { title: "Name", data: "Name" },
      { title: "Email", data: "Email" },
      { title: "Title", data: "Title" }
    ]
  });

  $('#myModal').on('shown.bs.modal', function (e) {


        table.columns.adjust().draw();

        var data = [];

        for (var count = 1; count <= 200; count++) {

            data.push({
                Name: "Test name of an user " + count,
                Email: "testuser.name@gmail.org",
                Title: "Title of the user will be displayed"
            });
        }

        table.clear().draw().rows.add(data);
        $.fn.dataTable.tables({ visible: true, api: true }).scroller.measure();
    });

});

Answer 1

It's working while open on first time. If I left the scroll bar at the half or bottom. It's not showing the records. So try scroll back to top.

$('#myModal').on('shown.bs.modal', function (e) {
    //Scroll back to top
    $('div.dataTables_scrollBody').animate({ scrollTop: 0 }, 100);
    table.columns.adjust().draw();

    var data = [];

    for (var count = 1; count <= 200; count++) {

        data.push({
            Name: "Test name of an user " + count,
            Email: "testuser.name@gmail.org",
            Title: "Title of the user will be displayed"
        });
    }

    table.clear().draw().rows.add(data);
    $.fn.dataTable.tables({ visible: true, api: true }).scroller.measure();
});

The working code: http://live.datatables.net/pujowuqo/4/