jquery datatable - 如果行为空，则会显示意外的垂直滚动条答案

【问题标题】：jquery datatable - unexpected vertical scrollbar is shown if a row is emptyjquery datatable - 如果行为空，则会显示意外的垂直滚动条
【发布时间】：2018-04-23 22:43:44
【问题描述】：

在某些情况下，我的应用程序会收到一个对象数组，其中的记录在所有属性中都具有空值。在这种情况下，整行中的所有单元格都将为空。

在这种情况下，数据表显示垂直滚动条。

在下面的示例中，滚动设置为“30vh”。但是，对于只有 2 条记录，会显示垂直滚动条。

有没有办法解决这个问题？提前致谢。

var data = [];
        for ( var i=0 ; i<2 ; i++ ) {
        
            var record = ['','','','','',''];
            if (i > 0)
            {
            record = [
            '', 
            'First Name ' + i, 
            'Last Name '+ i, 
            'Postal - ' + i, 
            'ZIP - '+ i, 
            'USA' ]
            }
            data.push( record );
        }
         
        var t = $('#example').DataTable( {
            data:           data,
            deferRender:    true,
            scrollY:        '30vh',
            scrollCollapse: true,
            scroller:       true,
            info:false
        } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js"></script>

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/scroller/1.4.3/css/scroller.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>ID</th>
                <th>First name</th>
                <th>Last name</th>
                <th>ZIP / Post code</th>
                <th>Country</th>
            </tr>
        </thead>
    </table>

【问题讨论】：

为什么不简单地将scroller 设置为false？
@ObsidianAge，感谢您的建议。我需要滚动条来提高性能。我收到的数据可能有数千个，这就是我启用滚动条的原因。
可能scrollY: '30vh;min-height:100px', 满足您的要求。
这是因为 CSS。将 max-height 更改为 100%，因为您的父容器最终的高度小于子容器，并且父容器的溢出设置为自动，这会为其添加一个滚动条。在这种情况下，父容器的高度最终为 59px，其中一个子容器的高度为 70px。
以像素为单位设置滚动值解决了这个问题。

标签： jquery datatables

【解决方案1】：

是的，正如您所说，空行会弄乱样式 - 他们不应该在那里。最好的办法是在它们被加载到表中之前过滤掉空行，方法是预处理返回的数据。为此，请使用 xhr 事件 - 这里有一些很好的例子来解释：https://datatables.net/reference/event/xhr

【讨论】：