我的 html 页面包含一个表格。我使用 dataTable 插件进行分页。1 https://i.stack.imgur.com/O2C1e.png
1 https://i.stack.imgur.com/O2C1e.pnghttps://datatables.net/examples/basic_init/alt_pagination.html 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"
});
}
});
};
.......
this loads data, but pagination is not working. means when I set 10 entries per page, it shows all entries..I have attached the screenshot. AM i missing any other plugin?
But in the mentioned tutorial, it says I need to use "pagingType" : "full_numbers" attribute only..
分页按预期完美运行。问题是你错误地插入了<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> ');
});
and
$('#clients_data').append('<tbody>'+rows.join('')+'</tbody>');
但你真的应该考虑使用columns https://datatables.net/reference/option/columns反而。