Estoy completando una tabla a través de Ajax JSON con tablas de datos, este es mi código JS:
$(document).ready(function () { $.ajax({ url: "../WebService.asmx/LoadUsers", type: 'POST', datatype: 'json', //content: 'json', lo mismo que arriba contentType: 'application/json; charset=utf-8', success: function (data) { var datos = JSON.parse(data.d); // METODO JQUERY DATATABLES Documentación $('#tblUsers').DataTable({ data: datos, columns: [ { 'data': 'id' }, { 'data': 'username' }, { 'data': 'password' }, { 'data': 'dregistered' }, { 'data': null, 'defaultContent': "<img src='../assets/img/delete.png' id='btnDel' style='width: 22px; cursor:pointer;' />" } // ], responsive: true }); /*DataTables instantiation.*/ /*$("#tblUsers").DataTable();*/ }, error: function () { alert('Fail!'); } }); });tabla html:
<table id="tblUsers" class="table table-bordered nowrap" style="width:100%"> <thead> <tr> <th>Id</th> <th>Usuario</th> <th>Contraseña</th> <th>Fecha</th> </tr> </thead> <tfoot> <tr> <th>Id</th> <th>Usuario</th> <th>Contraseña</th> <th>Fecha</th> </tr> </tfoot> </table>Mi tabla después de cargar la página html no muestra datos, parece que no se representa al principio, pero después de aplicar el filtro de columna o cambiar las entradas, los datos muestran: Filtrado por número de entradas
Filtrado por orden de columnas
¿Me estoy perdiendo de algo? 🤔
Su problema es probablemente que está tratando de establecer 5 columnas de datos (incluso si la quinta tiene data: null ) pero solo tiene 4 columnas en su <table> HTML.
Si observa su consola , probablemente debería haber algún error como Cannot read property 'style' of undefined o similar. Entonces, el error interrumpe la carga de los datos dentro de la tabla.
Cambie su HTML a esto (agregando un <th></th> adicional) y debería funcionar bien:
<table id="tblUsers" class="table table-bordered nowrap" style="width:100%"> <thead> <tr> <th>Id</th> <th>Usuario</th> <th>Contraseña</th> <th>Fecha</th> <th></th> </tr> </thead> <tfoot> <tr> <th>Id</th> <th>Usuario</th> <th>Contraseña</th> <th>Fecha</th> <th></th> </tr> </tfoot> </table>