DataTables es un complemento moderno de jQuery para agregar controles interactivos y avanzados a las tablas HTML de nuestra página web. Es un complemento muy fácil de usar con una variedad de opciones para los cambios personalizados del desarrollador según las necesidades de la aplicación. Las características del complemento incluyen paginación, clasificación, búsqueda y ordenación de varias columnas.
En este artículo, aprenderemos a inicializar múltiples tablas HTML usando el complemento jQuery DataTables .
Los archivos precompilados que se necesitan para implementar son
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
https: //cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Ejemplo: La inicialización de varias tablas se maneja con una línea de código utilizando el selector table.display . Ambas tablas se pueden operar juntas, pero se ejecutan de forma independiente.
<!DOCTYPE html>
<html>
<head>
<meta content="initial-scale=1,
maximum-scale=1, user-scalable=0"
name="viewport" />
<meta name="viewport"
content="width=device-width" />
<!--Datatable plugin CSS file -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<!--jQuery library file -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!--Datatable plugin JS library file -->
<script type="text/javascript"
src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h2>
Multiple tables operations
using jQuery Datatables
</h2>
<!--HTML tables with student data-->
<table id="" class="display" style="width:100%">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</thead>
<tbody>
<tr>
<td>ST1</td>
<td>Prema</td>
<td>35</td>
<td>Female</td>
<td>320</td>
</tr>
<tr>
<td>ST2</td>
<td>Wincy</td>
<td>36</td>
<td>Female</td>
<td>170</td>
</tr>
<tr>
<td>ST3</td>
<td>Ashmita</td>
<td>41</td>
<td>Female</td>
<td>860</td>
</tr>
<tr>
<td>ST4</td>
<td>Kelina</td>
<td>32</td>
<td>Female</td>
<td>433</td>
</tr>
<tr>
<td>ST5</td>
<td>Satvik</td>
<td>41</td>
<td>male</td>
<td>162</td>
</tr>
<tr>
<td>ST6</td>
<td>William</td>
<td>37</td>
<td>Female</td>
<td>372</td>
</tr>
<tr>
<td>ST7</td>
<td>Chandan</td>
<td>31</td>
<td>male</td>
<td>375</td>
</tr>
<tr>
<td>ST8</td>
<td>David</td>
<td>45</td>
<td>male</td>
<td>327</td>
</tr>
<tr>
<td>ST9</td>
<td>Harry</td>
<td>29</td>
<td>male</td>
<td>205</td>
</tr>
<tr>
<td>ST10</td>
<td>Frost</td>
<td>29</td>
<td>male</td>
<td>300</td>
</tr>
<tr>
<td>ST11</td>
<td>Ginny</td>
<td>31</td>
<td>male</td>
<td>560</td>
</tr>
<tr>
<td>ST12</td>
<td>Flod</td>
<td>45</td>
<td>Female</td>
<td>342</td>
</tr>
<tr>
<td>ST13</td>
<td>Marshy</td>
<td>23</td>
<td>Female</td>
<td>470</td>
</tr>
<tr>
<td>ST13</td>
<td>Kennedy</td>
<td>43</td>
<td>male</td>
<td>313</td>
</tr>
<tr>
<td>ST14</td>
<td>Fiza</td>
<td>31</td>
<td>Female</td>
<td>750</td>
</tr>
<tr>
<td>ST15</td>
<td>Silva</td>
<td>34</td>
<td>male</td>
<td>985</td>
</tr>
</tbody>
</table>
<br />
<table id="" class="display" style="width:100%">
<thead>
<tr>
<th>StudentID</th>
<th>StudentName</th>
<th>Age</th>
<th>Gender</th>
<th>Marks Scored</th>
</tr>
</thead>
<tbody>
<tr>
<td>ST15</td>
<td>Varun</td>
<td>41</td>
<td>male</td>
<td>262</td>
</tr>
<tr>
<td>ST16</td>
<td>Waheeda</td>
<td>47</td>
<td>Female</td>
<td>373</td>
</tr>
<tr>
<td>ST17</td>
<td>Charu</td>
<td>31</td>
<td>female</td>
<td>475</td>
</tr>
<tr>
<td>ST18</td>
<td>Dhriti</td>
<td>45</td>
<td>female</td>
<td>227</td>
</tr>
<tr>
<td>ST19</td>
<td>Haritha</td>
<td>39</td>
<td>female</td>
<td>295</td>
</tr>
<tr>
<td>ST20</td>
<td>Faran</td>
<td>39</td>
<td>male</td>
<td>340</td>
</tr>
<tr>
<td>ST21</td>
<td>Gaurav</td>
<td>31</td>
<td>male</td>
<td>562</td>
</tr>
<tr>
<td>ST22</td>
<td>Fenny</td>
<td>41</td>
<td>Female</td>
<td>349</td>
</tr>
<tr>
<td>ST23</td>
<td>Mamta</td>
<td>29</td>
<td>Female</td>
<td>471</td>
</tr>
<tr>
<td>ST23</td>
<td>Kamat</td>
<td>44</td>
<td>male</td>
<td>319</td>
</tr>
</tbody>
</table>
<script>
/* Initialization of datatables */
$(document).ready(function () {
$('table.display').DataTable();
});
</script>
</body>
</html>
Producción:
El siguiente resultado muestra que los datos de ambas tablas se cargan después de la inicialización.
El siguiente resultado muestra que ambas tablas se ejecutan de forma independiente y muestran la operación de «búsqueda» de estudiantes «mujeres».
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA