'Datatable JQuery pagination not showing

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

html

<!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>

$(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();
}

Could you help ? What I missed in my code ?

Thanks

Solution 1:^[1]

Try to init like :

$(document).ready(function(){

   function initDataTable(dataTable) 
    {
        dataTable.DataTable({
            "language": {
                "sProcessing": "Traitement en cours ...",
                "sLengthMenu": "Afficher _MENU_ lignes",
                "sZeroRecords": "Aucun résultat trouvé",
                "sEmptyTable": "Aucune donnée disponible",
                "sInfo": "Lignes _START_ à _END_ sur _TOTAL_",
                "sInfoEmpty": "Aucune ligne affichée",
                "sInfoFiltered": "(Filtrer un maximum de_MAX_)",
                "sInfoPostFix": "",
                "sSearch": "Chercher:",
                "sUrl": "",
                "sInfoThousands": ",",
                "sLoadingRecords": "Chargement...",
                "oPaginate": {
                "sFirst": "Premier", "sLast": "Dernier", "sNext": "Suivant", "sPrevious": "Précédent"
                },
                "oAria": {
                "sSortAscending": ": Trier par ordre croissant", "sSortDescending": ": Trier par ordre décroissant"
                }
            }
        })
    }

    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().fnDestroy();
    initDatable($('#processFailed'));
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Romylussone

'Datatable JQuery pagination not showing

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]