DataTables scroller blank rows
Shows blank rows in scroller
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.5.1/css/scroller.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/scroller/1.5.1/js/dataTables.scroller.min.js"></script>
<table id="example" class="hover row-border">
<thead>
<tr role="row">
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th>Col 10</th>
<th>Col 11</th>
<th>Col 12</th>
<th>Col 13</th>
<th>Col 14</th>
<th>Col 15</th>
<th>Col 16</th>
<th>Col 17</th>
<th>Col 18</th>
<th>Col 19</th>
<th>Col 20</th>
<th>Col 21</th>
<th>Col 22</th>
<th>Col 23</th>
<th>Col 24</th>
<th>Col 25</th>
<th>Col 26</th>
</tr>
</thead>
</table>
JavaScript
$(function() {
$('#example').DataTable({
serverSide: true,
ordering: false,
searching: false,
scrollY: "400px",
ajax: function (data, callback, settings) {
var out = [];
for (var i = data.start, ien = data.start + data.length; i < ien; i++) {
out.push([i + '-1', i + '-2', i + '-3', i + '-4', i + '-5', i + '-6', i + '-7', i + '-8', i + '-9', i + '-10', i + '-11', i + '-12', i + '-13', i + '-14', i + '-15', i + '-16', i + '-17', i + '-18', i + '-19', i + '-20', i + '-21', i + '-22', i + '-23', i + '-24', i + '-25', i + '-26']);
}
setTimeout(function () {
callback({
draw: data.draw,
data: out,
recordsTotal: 100000,
recordsFiltered: 100000
});
}, 50);
},
scroller: {
loadingIndicator: true
}
});
})