javascript - print - La paginación de DataTable no está funcionando?
datatable print style (1)
Tengo mi página html que contiene una tabla. Yo uso el plugin de dataTable para la paginación. 1
1 https://datatables.net/examples/basic_init/alt_pagination.html
Mi html de la siguiente manera.
<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"
});
}
});
};
.......
esto carga datos, pero la paginación no está funcionando. significa que cuando configuro 10 entradas por página, muestra todas las entradas ... He adjuntado la captura de pantalla. ¿Me falta otro complemento? Pero en el tutorial mencionado, dice que necesito usar el atributo "pagingType": "full_numbers" solo ..
La paginación funciona perfectamente como se esperaba. El problema es que inserta incorrectamente una sección <tbody> para cada fila. Y dado que solo puede tener un <tbody> por DataTable, la paginación mostrada se basará en la primera fila del conjunto de datos, mostrando siempre una página en total.
Usted podría hacer esto en su lugar:
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> '');
});
y
$(''#clients_data'').append(''<tbody>''+rows.join('''')+''</tbody>'');
pero deberías considerar usar columns lugar.