I am populating a table via Ajax JSON with datatables, this is my JS code:
$(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!');
}
});
});
Html table:
<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>
My table after loading html page Is not showing data, it seems like not rendering at first, but after applying column filter or changing entries, the data is showing: Filtering by entries number
Am I missing something? 🤔
Your problem is probably that you are trying to set 5 columns of data (even if the 5th one has data: null) but you have only 4 columns in your HTML <table>.
If you look at your console, probably there should be some error like Cannot read property 'style' of undefined or similar.
So, the loading of the data inside the table is interrupted by the error.
Change your HTML to this (adding an extra <th></th>) and it should go fine:
<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>