jQuery DataTable-放置在引導模式對話框中時不會顯示所有記錄

Question

我試圖在放置在引導模式對話框中的jquery數據表中顯示數據，但是由於某種原因，我無法看到所有數據。 使用滾動條而不是分頁來啟用jquery數據表以顯示大數據。

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

發行和復制步驟：

一種。 啟動JS Bin b。 不要調整頁面大小c。 單擊啟動演示模態按鈕d。 嘗試滾動查看數據。 e。 數據將部分顯示，最后一些記錄丟失

觀察：

如果我調整頁面大小，則所有數據開始顯示。 我不想觸發窗口調整大小，因為它將影響項目中的其他位置。

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

它在第一次打開時正在工作。 如果我將滾動條留在一半或底部。 它沒有顯示記錄。 因此，請嘗試滾動回頂部。

$('#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();
});

工作代碼： http : //live.datatables.net/pujowuqo/4/