jquery – datatables refresh table after ajax loaded data from mysql | PHP-ThrowExceptions

Exception or error:

I have the following datatable code as part of displaying table of information from mysql database:

      <table class="striped highlight" id="clientsTable">
          <input type="hidden" id="result_no" value="2">
          <thead>
            <tr>
              <th>Name</th>
              <th>Location</th>
              <th>Date</th>
              <th>Pac</th>
              <th>Status</th>
              <th>Edit</th>
            </tr>
          </thead>
          <tbody id="result_para">
<?php
foreach ($results as $result) {
  $clientsName = $result['clientNameA'];
  if($result['clientNameB'])
   {
    $clientsName .= ' ו-' .$result['clientNameB'];
   }else {
    $clientsName .= '';
  }
   ?>
       <tr>
         <td><?php echo $clientsName; ?></td>
         <td><?php echo $result['eventLocation']; ?></td>
         <td><?php echo $result['eventDate']; ?></td>
         <td><?php echo $result['clientPackage']; ?></td>
         <td class="">
         <span class="<?php $this->checkStatment($result['clientStatus'],'active,'chip-active');$this->checkStatment($result['clientStatus'],'tempo,'chip-tempo');
         $this->checkStatment($result['clientStatus'],'archive,'chip-archive');?>"><?php echo $result['clientStatus']; ?></span>
         </td>
         <td>
           <a data-target="updateClient" href="#!" class="modal-trigger waves-effect waves-light"
           data-idclients="<?php echo $result['idClients']; ?>"
           data-clientnamea="<?php echo $result['clientNameA']; ?>"
           data-clientnameb="<?php echo $result['clientNameB']; ?>"
           data-clientemail="<?php echo $result['clientEmail']; ?>"
           data-eventlocation="<?php echo $result['eventLocation']; ?>"
           data-clientphone="<?php echo $result['clientPhone']; ?>"
           data-eventdate="<?php echo $result['eventDate']; ?>"
           data-eventguests="<?php echo $result['eventGuests']; ?>"
           data-clientstatus="<?php echo $result['clientStatus']; ?>"
           ><i class="material-icons">edit</i></a>
         </td>
       </tr>
   <?php
}

And the following code to add more tr fields into it with ajax:

        $("#loadMore").click(function () {
        loadmore();
    });
});

function loadmore(trigger)
{
    $('#clientsTable').dataTable().fnClearTable();
     var val = document.getElementById("result_no").value;
    $.ajax({
        type: 'post',
        url: 'resources/php/loadMoreClients',
        data: {
            getresult: val,
        },
        success: function (response) {
            var content = document.getElementById("result_para");
            content.innerHTML = content.innerHTML + response;
            document.getElementById("result_no").value = Number(val) + 2;
        }
    });
    $('#clientsTable').dataTable().fnDraw();
}

Unfortunately every time I push new data into the table datatables do not refresh and the search function as well as the sorting is not working. You can see I tried to clear it with:

$('#clientsTable').dataTable().fnClearTable();

and then draw it again with:

$('#clientsTable').dataTable().fnDraw();

It is not working. Any ideas?

How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *