Estamos muy familiarizados con las tablas HTML que se utilizan para almacenar datos relacionados. DataTables es un complemento moderno de jQuery para agregar controles interactivos y avanzados a las tablas HTML de nuestras páginas web. Algunas características de DataTables son la clasificación, búsqueda, paginación y ordenación de datos. Hay muchas formas disponibles para obtener datos en DataTables.
En este artículo, aprenderemos a cargar datos de un archivo de texto en las tablas de datos que están listas para la paginación o la clasificación.
Los archivos precompilados que se necesitan para implementar los códigos 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
Ejemplo:
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>Datatables server side process</h2> <!--HTML table with student data--> <table id="tableID" 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> <tfoot> <tr> <th>StudentID</th> <th>StudentName</th> <th>Age</th> <th>Gender</th> <th>Marks Scored</th> </tr> </tfoot> </table> <script> /* Initialization of datatable */ $(document).ready(function () { /* Student's data loaded from text file */ $('#tableID').DataTable({ "ajax": 'ajaxData.txt' }); }); </script> </body> </html>
ajaxData.txt: La siguiente es la tabla de datos para estudiantes escrita en el archivo «ajaxData.txt» que se usa en la parte de JavaScript del código anterior.
{ "data": [ [ "ST1", "Preeti", "35", "Female", "320" ], [ "ST2", "Vincy", "36", "Female", "170" ], [ "ST3", "Ashwini", "41", "Female", "860" ], [ "ST4", "Kelly", "32", "Female", "433" ], [ "ST5", "Satvik", "41", "male", "162" ], [ "ST6", "William", "37", "Female", "372" ], [ "ST7", "Chandan", "31", "male", "375" ], [ "ST8", "David", "45", "male", "327" ], [ "ST9", "Harry", "29", "male", "205" ], [ "ST10", "Frost", "29", "male", "300" ], [ "ST11", "Ginny", "31", "male", "560" ], [ "ST12", "Flod", "45", "Female", "342" ], [ "ST13", "Marshy", "23", "Female", "470" ], [ "ST13", "Kennedy", "43", "male", "313" ], [ "ST14", "Fiza", "31", "Female", "750" ], [ "ST15", "Silva", "34", "male", "985" ] ] }
Producción:
Datos cargados desde el archivo:
Ejecución de búsqueda y paginación:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA