scroll - Jquery DataTables - 启用滚动 Y 时删除表中具有复杂标题的最后一行
问题描述
我正在使用 Jquery DataTables 1.10.18。我正在将现有的 HTML 表转换为 Datatable。我的表有复杂的标题。为了让复杂的表头在 Jquery DataTables 中工作，我在表头中添加了另一个空行，并将其作为引导类为“d-none”的隐藏行。
现在当我初始化我的数据表时，最后一行总是被 Jquery Datatable 删除。仅当行数大于 10 时才会发生这种情况。
我在这篇文章中插入了我的代码片段。请协助。
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
</head>
<body>
<div id="tableContainer" class="w-100 mw-100 overflow-x-hidden">
<table id="test" class="table table-bordered table-sm mt-0">
<thead>
<tr>
<th colspan="1" style="width:400px;">
<h2 class="h6 text-purple text-uppercase font-weight-bold">Description</h2>
</th>
<th colspan="4" class="py-0">
<div class="d-flex flex-row flex-wrap justify-content-between align-items-center text-dark">
<div class="w-30">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="abs">
<label class="custom-control-label font-weight-normal" for="abs">chkbox</label>
</div>
</div>
<div class="w-30">
<button type="button" class="btn btn-sm">Test</button>
</div>
<div class="w-40">
<div class="form-group row">
<label class="col-sm-4 col-form-label font-weight-normal" style="padding-top:11px;"
for="abs2">Test :</label>
<div class="col-sm-8 py-1">
<select class="form-control form-control-sm" id="abs2"></select>
</div>
</div>
</div>
</div>
<div class="d-flex flex-row align-content-center">
<span class="text-danger d-block"></span>
</div>
</th>
</tr>
<tr class="d-none">
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr data-row-id="0">
<td style="width: 400px; white-space: normal" class="align-middle">
1 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[0]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="0Yes" name="[0]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="0Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="0No" name="[0]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="0No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="0Admin" name="[0]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="0Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="0NotAdmin" name="[0]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="0NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="1">
<td style="width: 400px; white-space: normal" class="align-middle">
2 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[1]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="1Yes" name="[1]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="1Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="1No" name="[1]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="1No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="1Admin" name="[1]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="1Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="1NotAdmin" name="[1]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="1NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="2">
<td style="width: 400px; white-space: normal" class="align-middle">
3 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[2]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="2Yes" name="[2]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="2Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="2No" name="[2]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="2No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="2Admin" name="[2]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="2Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="2NotAdmin" name="[2]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="2NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="3">
<td style="width: 400px; white-space: normal" class="align-middle">
4 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[3]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="3Yes" name="[3]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="3Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="3No" name="[3]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="3No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="3Admin" name="[3]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="3Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="3NotAdmin" name="[3]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="3NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="4">
<td style="width: 400px; white-space: normal" class="align-middle">
5 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[4]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="4Yes" name="[4]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="4Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="4No" name="[4]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="4No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="4Admin" name="[4]" class="custom-control-input" value="Admin" />
<label class="custom-control-label" for="4Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="4NotAdmin" name="[4]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="4NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="5">
<td style="width: 400px; white-space: normal" class="align-middle">
6 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[5]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="5Yes" name="[5]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="5Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="5No" name="[5]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="5No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="5Admin" name="[5]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="5Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="5NotAdmin" name="[5]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="5NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="6">
<td style="width: 400px; white-space: normal" class="align-middle">
7 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[6]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="6Yes" name="[6]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="6Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="6No" name="[6]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="6No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="6Admin" name="[6]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="6Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="6NotAdmin" name="[6]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="6NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="7">
<td style="width: 400px; white-space: normal" class="align-middle">
8 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[7]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="7Yes" name="[7]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="7Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="7No" name="[7]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="7No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="7Admin" name="[7]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="7Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="7NotAdmin" name="[7]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="7NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="8">
<td style="width: 400px; white-space: normal" class="align-middle">
9 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[8]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="8Yes" name="[8]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="8Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="8No" name="[8]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="8No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="8Admin" name="[8]" class="custom-control-input" value="Admin" />
<label class="custom-control-label" for="8Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="8NotAdmin" name="[8]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="8NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="9">
<td style="width: 400px; white-space: normal" class="align-middle">
10 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[9]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="9Yes" name="[9]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="9Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="9No" name="[9]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="9No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="9Admin" name="[9]" class="custom-control-input" value="Admin" />
<label class="custom-control-label" for="9Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="9NotAdmin" name="[9]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="9NotAdmin">Not Admin</label>
</div>
</td>
</tr>
<tr data-row-id="10">
<td style="width: 400px; white-space: normal" class="align-middle">
11 <br />
<span class="text-danger d-block field-validation-valid" data-valmsg-for="Grid[10]"
data-valmsg-replace="true"></span>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="10Yes" name="[10]" class="custom-control-input" value="Yes" />
<label class="custom-control-label" for="10Yes">Yes</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="10No" name="[10]" class="custom-control-input" value="No" />
<label class="custom-control-label" for="10No">No</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="10Admin" name="[10]" class="custom-control-input" value="Admin"
checked="checked" />
<label class="custom-control-label" for="10Admin">Admin</label>
</div>
</td>
<td class="bg-info-lighter py-0 align-middle">
<div class="custom-control custom-radio">
<input type="radio" id="10NotAdmin" name="[10]" class="custom-control-input"
value="NotAdmin" />
<label class="custom-control-label" for="DataAbstractor10NotAdmin">Not Admin</label>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js">
</script>
<script>
$(function () {
if ($('#test').length !== 0) {
var test = $('#test').DataTable({
destroy: true,
scrollY: 200,
scrollCollapse: true,
processing: true,
autoWidth: true,
deferRender: true,
language: {
processing: "Loading...",
zeroRecords: "No matching records found"
},
ordering: false,
dom: '<tr>'
});
}
});
</script>
</body>
</html>解决方案
我猜问题是pageLength，默认值为 10
参考文档
您可以pageLength像这样添加 dataTable 初始化
$('#example').dataTable( {
"pageLength": 50
} );
或者
对于DataTables版本1.10.5和更新，您可以像这样在 HTML 本身中指定
<table data-page-length='25'>
...
</table>
推荐阅读
- ios - ios 生物特征身份验证期间 xamarin.forms 中的 HTTP 异常
- python - 尝试将图像添加到我的蛇游戏时出错
- mysql - SQL JOIN 具有表行到列的结果
- jenkins - 詹金斯管道中的咕噜战争任务失败
- javascript - (discord.js) 如何从公会中挑选两个不同的用户？
- php - 如何防止用户修改表单中提交的值？
- sql-server - MSSQL：插入查询中的 varchar 到浮点转换错误
- c# - 我正在尝试更新共享点列表中的项目，但它返回错误请求 .NET 核心
- firebase - 为什么我的小部件没有返回 else 块？
- powershell - 调用脚本作为 web api 方法的一部分：这个想法有多糟糕？