DataTables es un complemento moderno de jQuery para agregar controles interactivos y avanzados a las tablas HTML de nuestras páginas web. Es un complemento fácil de usar con una amplia gama de opciones para los cambios personalizados del desarrollador. Las características comunes del complemento DataTable son la paginación, el ordenamiento de varias columnas, la clasificación y la búsqueda.
Los archivos precompilados que se necesitan para la implementación del código son
CSS:
https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css
JavaScript:
//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js
Enfoque: el enfoque seguido es pasar datos dinámicos a la tabla de datos en lugar de pasar información de cualquier documento. Los pasos dados son los siguientes.
- Pase un conjunto de datos de array de JavaScript para los datos del usuario con el nombre, la designación, el salario y la dirección como datos que se utilizarán.
- La tabla HTML se usa con la identificación de la tabla como tableID .
- Datatable se inicializa con la identificación de la tabla.
- En la parte del script, la array JS se pasa mediante la opción de datos .
- Incluso las columnas se crean dinámicamente usando la opción column.title .
Ejemplo: El siguiente ejemplo demuestra cómo cargar datos de una array de JavaScript en tablas de datos usando el complemento.
HTML
<!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>load data from JavaScript array using Datatables</h2>
<!--HTML table with student data-->
<table id="tableID" class="display" style="width:100%">
<thead>
<tr>
<th>User name</th>
<th>Designation</th>
<th>Salary</th>
<th>Address</th>
<th>City</th>
</tr>
</thead>
</table>
<script>
var dataSet = [
[
"Tina Mukherjee",
"BPO member",
"300000",
"24,chandni chowk",
"Pune"
],
[
"Gaurav",
"Teacher",
"100750",
"esquare,JM road",
"Pune"
],
[
"Ashtwini",
"Junior engineer",
"860000",
"Santa cruz",
"mumbai"
],
[
"Celina",
"Javascript Developer",
"430060",
"crr lake side ville",
"tellapur"
],
[
"Aisha",
"Nurse",
"160000",
"rk puram",
"Delhi"
],
[
"Brad henry",
"Accountant",
"370000",
"chaurasi lane",
"Kolkatta"
],
[
"Harry",
"Salesman",
"130500",
"32, krishna nagar",
"Navi mumbai"
],
[
"Rhovina",
"Amazon supporter",
"300900",
"Aparna zone",
"hyderabad"
],
[
"Celina",
"Senior Developer",
"200000",
"23, chandni chowk",
"pune"
],
[
"Glenny",
"Administrator",
"200500",
"Nagpur",
"Maharashtra"
],
[
"Brad Pitt",
"Engineer",
"100000",
"sainikpuri",
"Delhi"
],
[
"Deepa",
"Team Leader",
"200500",
"Annanagar",
"Chennai"
],
[
"Angelina",
"CEO",
"1000000",
"JM road",
"Aundh pune"
]
];
$(document).ready(function() {
$('#tableID').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Designation" },
{ title: "Salary" },
{ title: "Address" },
{ title: "City" }
]
} );
} );
</script>
</body>
</html>
Producción:
Antes de ejecutar:
Después de ejecutar:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA