DataTable Showing 0 to 0 of 0 entries
DataTable Showing 0 to 0 of 0 entries
maabo
Posts: 7Questions: 3Answers: 0
I am using JQuery Datatable in my project, but I am not able to show the pagination and other one elements of datatable, in below You can review the codes as follow:
I can get data from my service it is work well only the datatable elements are not showed
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<link data-require="font-awesome@*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<!-- <link rel="stylesheet" type="text/css" th:href="@{/css/dataTables.bootstrap4.min.css}" /> -->
<link rel="stylesheet" type="text/css" th:href="@{/css/jquery.dataTables.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/monitor.css}" />
</head>
<body>
<h2 style="text-align: center">Process</h2>
<table class="datatable table table-striped table-bordered js-table-doc" style="width : 95%; margin-left:auto;margin-right:auto;" id="processFailed">
<thead>
<tr>
<th></th>
<th>id</th>
<th>name</th>
<th>parameterList</th>
<th>message</th>
<th>stacktrace</th>
<th>timestamp</th>
<th style="border: none"></th>
</tr>
</thead>
</table>
<span style=" padding-top: 30px; margin-left:auto;margin-right:auto;" th:utext="'Workflow Monitor - ' + ${applicationVersion}"></span>
<script type="text/javascript" th:src="@{/js/jquery-3.4.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery.dataTables.min.js}"></script>
<!-- <script type="text/javascript" th:src="@{/js/bootstrap.min.js}"></script> -->
<script type="text/javascript" th:src="@{/js/flow.js}"></script>
</body>
</html>
JS
$(document).ready(function(){
function refreshJsonData(){
$.ajax({
type: 'GET',
url: 'rest/jsonData',
dataType: 'json',
success: function (response) {
setTableWithFailedProcess(response);
}
})
}
function setTableWithFailedProcess(response) {
$('#processFailed').empty();
var $headers =
$('<tr>').append(
$('<th>').text(""),
$('<th>').text("id"),
$('<th>').text("name"),
$('<th>').text("paameterList"),
$('<th>').text("message"),
$('<th>').text("stacktrace"),
$('<th>').text("timestamp"),
$('<th style="width: 6%;">').text("actions")
);
$('#processFailed').append($headers).append('<tbody>');
$.each(response, function(i, item) {
var $checkBox = $('<input type="checkbox" class="btn btn-primary btn-sm" style=\"margin-left: 1px; border : none\" />');
$checkBox.click(function () {
var $this = $(this);
if ($this.prop('checked')) {
selected.push(item.id);
} else {
selected = selected.filter(data => data != item.id);
}
});
var $tr = $('<tr>').append(
$('<td>').text(""),
$('<td>').text(item.id),
$('<td>').text(item.name),
$('<td>').text(item.paameterList),
$('<td>').text(item.message),
$('<td>').text("detailLog"),
$('<td>').text(item.timestamp),
$('<td>').text("retryButton")
);
$('#processFailed').append($tr);
});
$('#processFailed').dataTable();
}
Answers
Do you get errors in the browser's console?
There is nothing obvious as to the problem. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Error : Uncaught TypeError: ea is undefined
I got this error and when I check in jquery.dataTable.min.js
--It is at this line
l(aa[0]).children("th, td").each(function(I,H){var ea=r.aoColumns[I];if(ea.mData===I) {....}
You need to append your rows to a
tbodyelement in your table - not the table itself.Perhaps better would be to just let DataTables load the JSON for you: example.
Allan