Question

我正在尝试在jquery数据表中显示数据，该数据放在引导模式对话框中，但由于某种原因，我无法看到所有数据。使用滚动条而不是分页来启用jquery数据表以显示大数据。

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

问题和复制步骤：

一个。启动JS Bin 湾不要调整页面大小 C。单击启动演示模式按钮 d。尝试滚动并查看数据。即数据将部分显示，最后缺少部分记录

观察：

如果我调整页面大小，则所有数据都会显示。我不想触发窗口调整大小，因为它会影响我项目中的其他位置。

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/

jQuery DataTable - 放置在bootstrap模式对话框中时不会显示所有记录

1 个答案: