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 displayStart se usa para especificar la fila desde la cual DataTable comenzará a mostrar sus filas. Se usa cuando la paginación está habilitada y la tabla debe comenzar desde una fila determinada. Especificar una fila comenzará en la tabla en la página correspondiente de esa fila.
Sintaxis:
{ displayStart: value }
Parámetros: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación.
- valor: este es un número que denota la fila desde donde DataTable comenzará a mostrar la tabla.
Los siguientes ejemplos ilustran el uso de esta opción.
Ejemplo 1: En este ejemplo, el valor se especifica de tal manera que comienza en la fila dada y su página correspondiente.
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>
<style>
td{
text-align:center;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<h3>DataTables displayStart Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
<tr>
<td>5</td>
<td>Five</td>
</tr>
<tr>
<td>6</td>
<td>Six</td>
</tr>
<tr>
<td>7</td>
<td>Seven</td>
</tr>
<tr>
<td>8</td>
<td>Eight</td>
</tr>
<tr>
<td>9</td>
<td>Nine</td>
</tr>
<tr>
<td>10</td>
<td>Ten</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
lengthMenu: [ 3, 5, 10 ],
// Set the starting row
// of the DataTable
displayStart: 4
});
});
</script>
</body>
</html>
Producción:
inicio de pantalla
Ejemplo 2: similar al ejemplo anterior, el valor se especifica de modo que comience en la fila dada y su página correspondiente.
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>
<style>
td
{
text-align:center;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksForGeeks
</h2>
<h3>DataTables displayStart Option</h3>
<!-- HTML table with random data -->
<table id="tableID" class="display nowrap">
<thead>
<tr>
<th>Number</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>One</td>
</tr>
<tr>
<td>2</td>
<td>Two</td>
</tr>
<tr>
<td>3</td>
<td>Three</td>
</tr>
<tr>
<td>4</td>
<td>Four</td>
</tr>
<tr>
<td>5</td>
<td>Five</td>
</tr>
<tr>
<td>6</td>
<td>Six</td>
</tr>
<tr>
<td>7</td>
<td>Seven</td>
</tr>
<tr>
<td>8</td>
<td>Eight</td>
</tr>
<tr>
<td>9</td>
<td>Nine</td>
</tr>
<tr>
<td>10</td>
<td>Ten</td>
</tr>
</tbody>
</table>
<script>
// Initialize the DataTable
$(document).ready(function () {
$('#tableID').DataTable({
lengthMenu: [ 5, 10 ],
// Set the starting row
// of the DataTable
displayStart: 5
});
});
</script>
</body>
</html>
Producción:
Enlace de referencia: https://datatables.net/reference/option/displayStart
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA