If you return data from the database Else is invalid

Question

I created a table to be filled with Datatables. If you return data from the database, I want you to take the last date of the date field and fill in the date of the day following that in the database, if you do not return data I want you to fill in the first day of the following month the date field.

I have the code as follows:

HTML:

<div align="right">
     <button type="button" name="add" id="add" class="btn btn-info"><span class="glyphicon glyphicon-plus"></span></button>
    </div>
    <br />
    <div id="alert_message"></div>
<table id="user_data" class="table table-bordered table-striped">
    <thead>
     <tr>
      <th>Data</th>
      <th>Resp. de Turno</th>
      <th>Apoio</th>
      <th>Elementos ALA A</th>
      <th>Elementos ALA B</th>
      <th></th>
     </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Javascript:

$(document).ready(function(){
  
  fetch_data();

  function fetch_data()
  {
   var dataTable = $('#user_data').DataTable({
    "processing" : true,
    "serverSide" : true,
    "oLanguage": {
    "sProcessing": "Aguarde enquanto os dados são carregados ...",
    "sLengthMenu": "Mostrar _MENU_ registros por pagina",
    "sZeroRecords": "Nenhum registro correspondente ao criterio encontrado",
    "sInfoEmtpy": "Exibindo 0 a 0 de 0 registros",
    "sInfo": "Exibindo de _START_ a _END_ de _TOTAL_ registros",
    "sInfoFiltered": "",
    "sSearch": "<span class='glyphicon glyphicon-search'></span>",
    "oPaginate": {
       "sFirst":    "<span class='glyphicon glyphicon-fast-backward'></span>",
       "sPrevious": "<span class='glyphicon glyphicon-backward'></span>",
       "sNext":     "<span class='glyphicon glyphicon-forward'></span>",
       "sLast":     "<span class='glyphicon glyphicon-fast-forward'></span>"
     }
    }, 
    "order" : [],
    "ajax" : {
     url:"./fetchmapa",
     type:"POST"
    }
   });
  }
function novaData(d){
   var dia  = d.getDate().toString();
   dia = (dia.length == 1) ? '0'+dia : dia;
   var mes  = (d.getMonth()+1).toString();
   mes = (mes.length == 1) ? '0'+mes : mes;
   var ano = d.getFullYear();
   return dia+"-"+mes+"-"+ano;
}
 
  class CellDate {
    constructor(start_date) {
        this.date = start_date;
    }
    getNextDate() {
   //here the change for if condition     
   if ($('#user_data tbody tr') != null && $('#user_data tbody tr').length > 0) {
            var ultima_data = $("#user_data tbody tr:first td:first").text().trim().split("-");
            var ultimo_dia = +ultima_data[0];
            var ultimo_mes = +ultima_data[1];
            var ultimo_ano = +ultima_data[2];
            this.date.setDate(ultimo_dia);
            this.date.setMonth(ultimo_mes - 1);
            this.date.setYear(ultimo_ano);
            this.date.setDate(this.date.getDate() + 1);
            console.log('if', this.date);
        } else {
            this.date.setMonth(this.date.getMonth() + 1);
            this.date.setDate(1);
            console.log('else', this.date);
        }
        return novaData(this.date);
    }
}

  var DateIndexer = new CellDate(new Date(Date.now()));  

 $('#add').click(function(){

   var html = '<tr>';
   html += '<td contenteditable id="data1">'+DateIndexer.getNextDate()+'</td>';
   html += '<td contenteditable id="data2"></td>';
   html += '<td contenteditable id="data3"></td>';
   html += '<td contenteditable id="data4"></td>';
   html += '<td contenteditable id="data5"></td>';
   html += '<td><button type="button" name="insert" id="insert" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-send"></span></button></td>';
   html += '</tr>';
   $('#user_data tbody').prepend(html); //<--- right here

}); 

 $(document).on('click', '#insert', function(){
   var data = $('#data1').text();
   var responsavel = $('#data2').text();
   var apoio = $('#data3').text();
   var elementos = $('#data4').text();
   var elementos1 = $('#data5').text();
   if(data != '' && responsavel != '' && apoio != '' && elementos != '' && elementos1 != '')
   {
    $.ajax({
     url:"./insert",
     method:"POST",
     data:{data:data, responsavel:responsavel, apoio:apoio, elementos:elementos, elementos1:elementos1},
     success:function(data)
     {
      $('#alert_message').html('<div class="alert alert-success">'+data+'</div>');
      $('#user_data').DataTable().destroy();
      fetch_data();
     }
    });
    setInterval(function(){
     $('#alert_message').html('');
    }, 5000);
   }
   else
   {
    alert("Os campos são de preencimento obrigatório!");
   }
  }); 

So if there is already data in the data table, fill in the date field with the date of the next day, but if the database table is empty and does not return data, I get the following message in the console:

if Invalid Date

But withdraw in the javascript the fetch_data(); already works, but does not show the data that already exist in the database and will always start on the first day of the following month.

I leave the two examples. Example with the problem: With the fetch_data(); where it does not start on the first day of the following month since it does not return data insert link description here

Example that works: Without the fetch_data();, but if there is data in the database it does not show it to the user insert link description here

I wanted to put the example that doesn’t work, because I want to show the data to the user, if it exists in a database.

Answer 1

It is because Datatables, when there is no data coming from Ajax, automatically creates a line with only one column informing that there is no data to show, and when entering the if will try to pull a date that does not exist.

To resolve this, just check on if if the first row of the table has more than one column, that is, at least 1 row with data has been added in the table, if there is more than one column in the first row:

if ($('#user_data tbody tr:first td').length > 1) {