Estoy diseñando páginas cshtml usando Según las instrucciones dadas aquí, https://github.com/Mobius1/Vanilla-DataTables
He agregado archivos CSS y JS apropiadamente,
CSS
<link href="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">JS
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>Traté de inicializar la tabla en mi página de índice llamando al siguiente código en mi página de índice cshtml
<script> var table = new DataTable("table"); </script>También probé
<script> var table = new DataTable("#datatable"); </script>donde la tabla es el nombre de la clase de mi tabla y la tabla de datos es la identificación de la tabla. Pero no aparece nada. Por favor, hágamelo saber si necesita más detalles. Estoy usando .net core y bootstrap en la arquitectura MVC.
Según la respuesta proporcionada, terminé usando tablas de datos simples de las que se hace referencia en el mismo repositorio de Github como una solución que es la última iteración de tablas de datos de vainilla:
https://github.com/fiduswriter/Simple-DataTables
Y se inicializó usando el siguiente script en la parte inferior de la página cshtml:
<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script> <script> // Simple Datatable var mytable = document.querySelector('#datatable'); var dataTable = new simpleDatatables.DataTable(mytable,{ //Enter any additional config details required here if required. Else Leave Blank }); </script>El repositorio Vanilla-DataTables al que se vinculó tiene varios enlaces con ejemplos usando sus scripts.
El valor utilizado en DataTable .ctor parece ser el nombre de clase de la(s) tabla(s) HTML para enlazar Vanilla-DataTables .
Entonces, en tu ejemplo, si usas:
<script> var table = new DataTable("table"); </script> Luego, debe tener una table HTML con una clase css llamada table :
<table class="table"> <thead> <tr> <th>Name</th> <th>Ext.</th> <th>City</th> <th data-type="date" data-format="YYYY/MM/DD">Start Date</th> <th>Completion</th> </tr> </thead> <tbody> <tr><td>Unity Pugh</td><td>9958</td><td>Curicó</td><td>2005/02/11</td><td>37%</td></tr> <tr><td>Theodore Duran</td><td>8971</td><td>Dhanbad</td><td>1999/04/07</td><td>97%</td></tr> <tr><td>Kylie Bishop</td><td>3147</td><td>Norman</td><td>2005/09/08</td><td>63%</td></tr> <tr><td>Alisa Horn</td><td>9853</td><td>Ucluelet</td><td>2007/01/11</td><td>39%</td></tr> <tr><td>Zelenia Roman</td><td>7516</td><td>Redwater</td><td>2012/03/03</td><td>31%</td></tr> </tbody> </table>Fuente: Vanilla-DataTable Demos > Configuración predeterminada