jQuery DataTable - ブートストラップモーダルダイアログに配置すると、すべてのレコードが表示されない

Question

jqueryデータテーブルにデータを表示しようとしていますが、何らかの理由ですべてのデータを表示できません。 jqueryデータテーブルは、大きなデータを表示するためにページングの代わりにスクロールバーで有効になります。

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

問題と再現手順：

。 JS Bin を起動します。ページのサイズを変更しないでください c。起動デモモダルボタン をクリックします。スクロールしてデータを参照してください。 e。 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/