我的 html 页面包含一个表格。我使用 dataTable 插件进行分页。 1
1 https://datatables.net/examples/basic_init/alt_pagination.html
我的html如下。
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"
type="text/javascript"></script>
<script type="text/javascript"
src=" https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<style type="text/css">
table, th,td{
border: 1px solid black;
text-align:center;
}
#clients_data {
margin-bottom:100px;
}
</style>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<title>Clients</title>
</head>
<body>
<table style="width: 100%" id="clients_data" class="display" >
<caption>Clients</caption>
<thead>
<tr>
<th>Clients</th>
<th>Number of Sites</th>
<th>Reset the Processing</th>
</tr>
</thead>
</table>
<table style="width: 100%" id="machines_data">
<caption>Machines</caption>
<thead>
<tr>
<th>Number</th>
<th>Machine Name</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
loadCustomers();
loadMachines();
});
function loadCustomers() {
$
.ajax({
type : 'GET',
url : 'http://localhost:8080/cache/getCustomers',
dataType : 'json',
success : function(data) {
var rows = [];
$
.each(
data,
function(id, value) {
rows
.push(' <tbody><tr><td><a href="clientSiteInfo.html?client='
+ id
+ '">'
+ id
+ '</td><td>'
+ value
+ '</td><td><button type="button" onclick="reset(\''
+ id
+ '\')">Reset</td></tr> </tbody>');
});
$('#clients_data').append(rows.join(''));
$('#clients_data').DataTable({
"pagingType" : "full_numbers"
});
}
});
};
.......
这会加载数据，但分页不起作用。意味着当我设置每页 10 个条目时，它会显示所有条目..我已附上屏幕截图。我还缺少其他插件吗？
但在提到的教程中，它说我只需要使用 "pagingType": "full_numbers" 属性..
最佳答案
分页按预期完美运行。问题是您错误地插入了 <tbody>每行的部分。因为你只能拥有一个 <tbody>每个数据表显示的分页将基于数据集中的第一行，因此始终显示总共一页。
你可以这样做:
rows
.push(' <tr><td><a href="clientSiteInfo.html?client=' +
id +
'">' +
id +
'</td><td>' +
value +
'</td><td><button type="button" onclick="reset(\'' +
id +
'\')">Reset</td></tr> ');
});
和
$('#clients_data').append('<tbody>'+rows.join('')+'</tbody>');
但你真的应该考虑使用 columns 反而。
关于javascript - 数据表分页不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46780285/