Considere mi tabla con diez filas y quiero mostrar las primeras tres filas en la página 1 y así sucesivamente ... ¿Cómo paginar una tabla usando jquery? Cualquier buen complemento ....¿Es posible paginar una tabla usando jquery?
Respuesta
Hay plugins para hacer esto:.
- http://plugins.jquery.com/project/pagination
- http://beckelman.net/demos/jqueryTableSorterConPaging/default.aspx
Además, hay un buen tutorial aquí que cubre todo tipo de manipulación de tablas en jQuery incluyendo p aginación: http://www.packtpub.com/article/jquery-table-manipulation-part1
Desafortunadamente , se han movido los primeros dos enlaces. –
El complemento jTable está aquí: http://plugins.jquery.com/jTable/ con más información, incluyendo enlaces a la documentación aquí: http://jtable.org/Home/Downloads. – John
En resumen, sí.
Hay un complemento para jquery pagination.
También hay Pajinate.
Usted también puede simplemente ir a the plugins sección del sitio de jQuery y palabras clave de búsqueda que le interesan
Puede usar el complemento Tablesorter, con su correspondiente pagination plugin.
Prefiero este datatables.
Puede usar el complemento datatable
.Es muy útil con la función de búsqueda y número de página personalizado.
Creo que lo más fácil es datatables. Enlace: http://www.datatables.net/ usando "paginación: true"
Así código sería algo como:
$('#your-table').dataTable({
"scrollY": "350px",
"scrollCollapse": true,
"bSort": false,
"paging": true
});
<table class="paginated">
<thead>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
-
<script>
$('td', 'table').each(function(i) {
$(this).text(i+1);
});
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
});
$table.trigger('repaginate');
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows/numPerPage);
var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number"></span>').text(page + 1).bind('click', {
newPage: page
}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active').siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertBefore($table).find('span.page-number:first').addClass('active');
});
</script>
-
<style>
table {
width: 40em;
margin: 2em auto;
}
thead {
background: #000;
color: #fff;
}
td {
width: 10em;
padding: 0.3em;
}
tbody {
background: #ccc;
}
div.pager {
text-align: center;
margin: 1em 0;
}
div.pager span {
display: inline-block;
width: 1.8em;
height: 1.8em;
line-height: 1.8;
text-align: center;
cursor: pointer;
background: #000;
color: #fff;
margin-right: 0.5em;
}
div.pager span.active {
background: #c00;
}
</style>
- 1. ¿Cómo paginar listview en jQuery-Mobile?
- 2. ¿Es posible generar PDF usando jQuery?
- 3. ¿Cómo usar jQuery para paginar datos JSON?
- 4. ¿Es posible ordenar una tabla Hash?
- 5. tabla Eliminar fila usando jQuery
- 6. ¿Es posible usar un cuadro de confirmación modal usando JQuery?
- 7. es posible eliminar un comentario html de dom usando jquery
- 8. ¿Es posible implementar "Recordarme" usando las cookies de jquery?
- 9. ¿Es posible cambiar el nombre de una tabla en Firebird?
- 10. En Oracle, ¿es posible "insertar" una columna en una tabla?
- 11. ¿Es posible que una tabla SQL tenga cero columnas?
- 12. ¿Es posible el compilador Jquery * *?
- 13. Agregar filas a tbody de una tabla usando jQuery
- 14. Recupere filas anteriores y siguientes en una tabla usando jQuery
- 15. ¿Cómo oculto el medio de una tabla usando jQuery?
- 16. es posible hacer dos claves principales en una tabla
- 17. ¿Es posible tener una selección sin tabla con varias filas?
- 18. Informes Jasper: ¿es posible una tabla de contenido correcta?
- 19. ¿Es posible tratar una tabla como solo lectura en hibernación?
- 20. ¿Es posible insertar un formulario dentro de una tabla html?
- 21. Obteniendo la última fila de una tabla usando jQuery?
- 22. ¿Cómo añades filas a una tabla usando jQuery?
- 23. Creando una tabla HTML sobre la marcha usando jQuery
- 24. ¿Es posible crear una matriz multidimensional vacía en javascript/jquery?
- 25. ¿Es posible especializar una plantilla usando una enumeración de miembro?
- 26. Cuál es la forma correcta de paginar (especialmente con JQuery y Jersey)
- 27. ¿Es posible unir "dinámicamente" una tabla solo si esa tabla aún no está unida?
- 28. ¿Es posible simular una combinación de teclas Ctrl + F usando Jquery?
- 29. cómo paginar registros de múltiples modelos? (¿Necesito una unión polimórfica?)
- 30. Jquery $ .post() - ¿Es posible hacer una solicitud de página completa?
Sí lo es. Hay un buen tutorial aquí: www.youtube.com/phpapplied – Norse