DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML de la página web. Esto también permite buscar, ordenar y filtrar los datos de la tabla según las necesidades del usuario. DataTable también expone una potente API que se puede utilizar para modificar la forma en que se muestran los datos.
La opción pagingType se usa para especificar el tipo de controles que se mostrarán debajo de DataTable para la paginación. Acepta un valor de string que se puede especificar mediante el uso de 6 tipos integrados de controles disponibles. Estos se especifican mediante los siguientes valores.
- simple: En este tipo de control solo se muestran los botones ‘Anterior’ y ‘Siguiente’.
- números_simples: en este tipo de control, los botones ‘Anterior’ y ‘Siguiente’ se muestran junto con los números de página.
- completo: En este tipo de control solo se muestran los botones ‘Primero’, ‘Anterior’, ‘Siguiente’ y ‘Último’.
- full_numbers: en este tipo de control, los botones ‘Primero’, ‘Anterior’, ‘Siguiente’ y ‘Último’ se muestran junto con los números de página.
- Números: En este tipo de control solo se muestran los números de página.
- first_last_numbers: En este tipo de control, los botones ‘Primero’ y ‘Último’ se muestran junto con los números de página.
Se pueden agregar otros tipos usando complementos de DataTable.
Sintaxis:
{ pagingType: value }
Parámetros: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación.
- valor: este es un valor de string que especifica el tipo de controles que se mostrarán.
El siguiente ejemplo ilustra el uso de esta opción. Veremos todos los diferentes tipos de paginación que están integrados en DataTables.
Ejemplo 1: En este tipo de control, los botones se muestran junto con los números de página.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: numbers</h4>
<table id="table_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
$(document).ready(function () {
$('#table_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "numbers"
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este tipo de control, solo se muestran los botones ‘Anterior’ y ‘Siguiente’.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: simple</h4>
<table id="table_simple"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
$(document).ready(function () {
$('#table_simple').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "simple"
});
});
</script>
</body>
</html>
Producción:
Ejemplo 3: en este tipo de control, los botones ‘Anterior’ y ‘Siguiente’ se muestran junto con los números de página
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: simple_numbers</h4>
<table id="table_simple_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
$(document).ready(function () {
$('#table_simple_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "simple_numbers"
});
});
</script>
</body>
</html>
Producción:
Ejemplo 4: En este tipo de control, solo se muestran los botones ‘Primero’, ‘Anterior’, ‘Siguiente’ y ‘Último’.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: full</h4>
<table id="table_full"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
$(document).ready(function () {
$('#table_full').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "full"
});
});
</script>
</body>
</html>
Producción:
Ejemplo 5: en este tipo de control, los botones ‘Primero’, ‘Anterior’, ‘Siguiente’ y ‘Último’ se muestran junto con los números de página.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: full_numbers</h4>
<table id="table_full_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
$(document).ready(function () {
$('#table_full_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "full_numbers"
});
});
</script>
</body>
</html>
Producción:
Ejemplo 6: En este tipo de control, los botones ‘Primero’ y ‘Último’ se muestran junto con los números de página.
HTML
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet"
href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables pagingType Option</h3>
<!-- HTML table with random data -->
<h4>pagingType: first_last_numbers</h4>
<table id="table_first_last_numbers"
class="display nowrap"
style="width: 100%;">
</table>
<script>
// Define the columns and content
// of the DataTable
let columnData = [
{ title: "Day" },
{ title: "Name" },
{ title: "Age" }
];
let tableData = [
["2", "Ivor", "30"],
["3", "Vance", "32"],
["5", "Octavius", "43"],
["0", "Abel", "35"],
["3", "Cecilia", "32"],
["4", "Sebastian", "36"],
["5", "Uriah", "41"],
["6", "Abigail", "15"],
["10", "Sam", "68"],
["33", "Richard", "25"]
]
// Initialize the DataTable
$(document).ready(function () {
$('#table_first_last_numbers').DataTable({
data: tableData,
columns: columnData,
pageLength: 4,
// Specify the paging type to be used
// in the DataTable
pagingType: "first_last_numbers"
});
});
</script>
</body>
</html>
Producción:
Enlace de referencia: https://datatables.net/reference/option/pagingType
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA