Wierd anoying warning
Wierd anoying warning
snithfferx
Posts: 7Questions: 1Answers: 0
I have this wierd warning message when I try to make data from server visible using ajax option
"DataTables warning: table id=promoTypesTable - "
Link to test case:
Not working. I had try every website you provide to make a test example, but cannot use the ajax option.
in order to make the test, use the following code:
<table class="table table-striped table-hover" id="promoTypesTable" style="width:100%">
<thead class="thead-dark">
<tr>
<th> ID </th>
<th> Imagen </th>
<th> Nombre </th>
<th> Descripción </th>
<th> Tags </th>
<th> Mensaje </th>
<th> Colección </th>
<th> Tiempo </th>
<th> Estado </th>
<th> Acciones </th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
let datos = {"data":[{"id":"1","name":"Promo quincenal","description":"Esta promoci\u00f3n dura quince d\u00edas","image":"","tag":"Promoci\u00f3n Quincenal","message":"Aprovecha nuestra promoci\u00f3n quincenal","collection":"","url":"","limit":"15","liquidation":"0","status":"0"},{"id":"2","name":"Promo Semanal","description":"Promoci\u00f3n de 7 d\u00edas","image":"","tag":"Promoci\u00f3n Semanal","message":"Aprovecha los descuentos de la semana","collection":"","url":"","limit":"7","liquidation":"0","status":"1"}],"error":[]}; // this is my server's json or ajax response
let typesTable;
typesTable = $("#promoTypesTable").DataTable({
ajax: 'http://localhost/Core/sales.php?type=promotion_types&terms=all',
columns:[
{data: 'id'},
{data: (r) => {
if (r.image == '' || r.image == null) {
return '<img src="assets/img/no_photo.png" alt="Sin Imagen" height="60">';
} else {
return `<img src="${r.image}" alt="${r.name}" height="60">`;
}
}
},
{data: 'name'},
{data: 'description'},
{data: 'tag'},
{data: 'message'},
{data: (r) => {
if (r.collection == '' || r.collection == null) {
return 'Sin Colección';
} else {
return `<a href="${r.url}" target="_blank">${r.collection}</a>`;
}
} },
{data: {
_: (r) => {
if (r.limit == 0 || r.limit == '0') {
return 'Sin límite';
} else {
if (r.limit == 1 || r.limit == '1') {
return r.limit + ' día';
} else {
return r.limit + ' días';
}
}
},
sort: 'limit' } },
{data: (a) => {
if (a.status == 1 || a.status === '1') {
return 'Activo';
} else {
if (a.status == 0 || a.status === '0') {
return 'Inactivo';
} else {
return 'Eliminado';
}
}
} },
{data: (a) => {
return `<a href="#" class="btn btn-primary btn-block" data-toggle="modal" data-target="#promoTypeModal" data-id="${a.id}" data-action="edit">Editar</a><a href="#" class="btn btn-danger btn-block" data-toggle="modal" data-target="#promoTypeModal" data-id="${a.id}" data-action="delete">Eliminar</a>`;
} }
],
language: {
url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/es-ES.json',
},
searching: true,
responsive: true,
scrollCollapse: true,
scrollY: '100vh'
});
</script>
Debugger code (debug.datatables.net):
Not working too.
Here what I had can copy from it:
promotable
Data source: DOM
Processing mode: Client-side
Draws: 97
Columns: 7
Rows - total: 96
Rows - after search: 96
Display start: 0
Display length: 10
version
LibraryInfoInstalledLatest
DataTablesNew version available1.12.11.13.6
AutoFill -2.6.0
Buttons -2.4.1
ColReorder -1.7.0
Editor -2.2.2
FixedColumns -4.3.0
FixedHeaderNew version available3.2.43.4.0
KeyTable -2.10.0
ResponsiveNew version available2.3.02.5.0
RowGroup -1.4.0
RowReorder -1.4.1
Scroller -2.2.0
SearchBuilder -1.5.0
SearchPanes -2.2.0
Select -1.7.0
issues
15 tests complete. 5 problems were found:
Table IDProblem description
promotableThis table has max-width applied to its CSS which can cause issues, particularly in Safari. Setting max-width will not allow the table to expand beyond the value given, meaning that column alignment and scrolling can be effected.
promoTypesTableThis table has max-width applied to its CSS which can cause issues, particularly in Safari. Setting max-width will not allow the table to expand beyond the value given, meaning that column alignment and scrolling can be effected.
promoTypesShortTableThis table has max-width applied to its CSS which can cause issues, particularly in Safari. Setting max-width will not allow the table to expand beyond the value given, meaning that column alignment and scrolling can be effected.
promoTypesTableThe table has scrolling enabled and the header and body parts of the table are misaligned. This is typically cased by the table being initialised when it is hidden. In this case, the table needs to have the columns.adjust() method called on it when the table is made visible. This example shows how that can be done with Bootstrap tabs.
promoTypesTableTables which have scrolling enabled should have their width set to be 100% to allow dynamic resizing of the table. This should be done with a width="100%" or style="width:100%" attribute. Using width:100% in your CSS is unfortunately not enough as it is very difficult to read a percentage value from stylesheets!
I try to use it but just give a 404 page https://debug.datatables.net/usepod
Error messages shown:
"DataTables warning: table id=promoTypesTable - "
Description of problem:
The main problem is that, data is displaying well, excepts, headers; and the anoying alert with the message above.
I know is an option issue, but I don't get where. I had try many solutions that are describe in the API documentation, but no good results.
also trying searching for any issue like this in the web with no luck.
For now I would let it be like this but I want to resolve the alert, any help is apreciated.
I'm using DataTables-1.12.1, and booststrap 4.0 (also not available in most of the testing web-sites)
Thanks for anything...!
Replies
Here a few snapshots of the alert and results
The Alert.
the result after I change of tabs in order to see the table.
I had aply the solution of the example here but the debuger keeps seeing the issue.
Can you show me the JSON response from the server for the Ajax loaded data please? My guess is that you have an
errorproperty in it, and DataTables is showing that.Allan
Thank you for respond.
The JSON response was inside the code I let.
I made a quickly test in order to see if, json code was bad structured, but acording with https://jsonlint.com/ all is in good shape.
That's the issue. Remove that from the response and it will work okay. Or make it
null.Allan
The warning disapear.
Thanks for your help.
I think they have to advice to other users in the future to only serve one array of objects in a response.