为什么DataTable（）。ajax.reload（）无法使用ajax JSON响应自动重新加载表？

Question

I'm new in Jquery I want that once the user deletes an item(row) of table on click on "Supprimer" button I will delete it on data base the table reloads automatically without this deleted line. To do I used jQuery with DataTables:

What is going on is once I click on "Ajouter" but it shows me this alert:

DataTables warning: table id=tablebqup - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

I checked my database it was deleted but the table failed to load.

I checked my Console and I found that :

Uncaught TypeError: Cannot set property 'data' of null
at sa (datatables.min.js:48)
at Sb (datatables.min.js:119)
at s.<anonymous> (datatables.min.js:120)
at s.iterator (datatables.min.js:111)
at s.<anonymous> (datatables.min.js:120)
at Object.reload (datatables.min.js:114)
at Object.success (updtbq.js:69)
at i (jquery-3.2.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.2.1.min.js:2)
at A (jquery-3.2.1.min.js:4)
sa @ datatables.min.js:48
Sb @ datatables.min.js:119
(anonymous) @ datatables.min.js:120
iterator @ datatables.min.js:111
(anonymous) @ datatables.min.js:120
(anonymous) @ datatables.min.js:114
(anonymous) @ updtbq.js:69
i @ jquery-3.2.1.min.js:2
fireWith @ jquery-3.2.1.min.js:2
A @ jquery-3.2.1.min.js:4
(anonymous) @ jquery-3.2.1.min.js:4
XMLHttpRequest.send (async)
send @ jquery-3.2.1.min.js:4
ajax @ jquery-3.2.1.min.js:4
r.(anonymous function) @ jquery-3.2.1.min.js:4
(anonymous) @ updtbq.js:58
dispatch @ jquery-3.2.1.min.js:3
q.handle @ jquery-3.2.1.min.js:3

I searched for the error and I found that DataTables by default, expects the data loaded to be valid JSON I have done some modification on my code but I failed to fix the error. Please can some one help for that.

Here is my php file:

<?php
require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php");
$bnqs=MainController::getBanque();
echo'
  <thead>
    <tr>
      <th style="display:none;">Id Banque</th>
      <th>Nom de la banque</th>
      <th>Abrev </th>
      <th>Siège Sociale</th>
      <th>Tel</th>
      <th>Fax</th>
      <th>Modifier</th>
      <th>Supprimer</th>
    </tr>
  </thead>
  <tbody>
  <form method="post">
  ';
  $i=0;
foreach ($bnqs as $bnq) {
if($bnq['supr']!=1)
{
  echo
  " <tr>
  <td style='display:none;'>".$bnq['idbc']."</td>
  <td  contenteditable='true'>".$bnq['nomb']."</td>
  <td  contenteditable='true'>".$bnq['abrvb']."</td>
  <td  contenteditable='true'>".$bnq['sigsocial']."</td>
  <td  contenteditable='true'>".$bnq['tel']."</td>
  <td  contenteditable='true'>".$bnq['fax']."</td>
  <td> <button id='modif$i' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp$i' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr>";
  $i++;
}
}
echo'
</form>
  </tbody>

';

here is my jS file :

var basUrl="http://localhost/Mini_Prj/";
$(document).ready(function(e){
   $('#tablebqup').dataTable();
....

  $(".supp").click(function () {
    $choix=confirm("voulez vous vraiment sauvegarder les modifications");
    if ($choix)
    {
      var id=($(this).parent().parent().find('td:eq(0)').html());// the value in the 1st column.
      var nombc=($(this).parent().parent().find('td:eq(1)').html());
      var abrv= ($(this).parent().parent().find('td:eq(2)').html());
      var sigsoc=($(this).parent().parent().find('td:eq(3)').html());
      var telf=($(this).parent().parent().find('td:eq(4)').html());
      var fx=($(this).parent().parent().find('td:eq(5)').html());
      console.log(id);
      $.post(basUrl+'views/component/updtbq.php',
        {
          action:'sup_bq',
          idbc:id,
          nomb:nombc,
          abrvb:abrv,
          sigsocial:sigsoc,
          tel:telf,
          fax:fx,
        }, function(data) {
     $("#tablebqup").DataTable().ajax.reload();//Here is my problem
       });
     }
  });
...

and here is the generated Html:

<div class="updBanque">
  <div>
  <h3>  Mise a jours des banques</h3>
  <div >
    <div class="table-responsive">
        <table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover ">
  <?php  include './component/tbbanqueupd.php';
  ?>
</table>
<form  method="post">
  <button type="button" class="btn btn-info" name="button" id="newbq" >Nouvelle banque</button>
</form>

</div>
</div>
</div>
</div>

Here is the response:

  <thead>
    <tr>
      <th style="display:none;">Id Banque</th>
      <th>Nom de la banque</th>
      <th>Abrev </th>
      <th>Siège Sociale</th>
      <th>Tel</th>
      <th>Fax</th>
      <th>Modifier</th>
      <th>Supprimer</th>
    </tr>
  </thead>
  <tbody>
  <form method="post">
   <tr>
  <td style='display:none;'>4</td>
  <td  contenteditable='true'>BANQUE DE DÉVELOPPEMENT LOCAL</td>
  <td  contenteditable='true'>BDL</td>
  <td  contenteditable='true'>5, rue Gaci Amar, Staoueli, Alger</td>
  <td  contenteditable='true'>021 39 34 83– 033 52 15</td>
  <td  contenteditable='true'>021 39 37 53</td>
  <td> <button id='modif0' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp0' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr> <tr>
  <td style='display:none;'>2</td>
  <td  contenteditable='true'>BANQUE DE L’AGRICULTURE ET
DU DÉVELOPPEMENT RURAL</td>
  <td  contenteditable='true'>BADR</td>
  <td  contenteditable='true'>17, Boulevard Colonel Amirouche, Alger</td>
  <td  contenteditable='true'>021 64 24 77– 63 38 78</td>
  <td  contenteditable='true'>021 63 51 46 / 64 34 44</td>
  <td> <button id='modif1' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp1' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr> <tr>
  <td style='display:none;'>1</td>
  <td  contenteditable='true'>BANQUE EXTÉRIEURE D’ALGÉRIE</td>
  <td  contenteditable='true'>BEA</td>
  <td  contenteditable='true'>48, Rue des Frères Bouadou,
Bir Mourad Raïs – Alger</td>
  <td  contenteditable='true'>023 83 54 79</td>
  <td  contenteditable='true'>021 56 30 50 / 056 51 56</td>
  <td> <button id='modif2' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp2' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr> <tr>
  <td style='display:none;'>3</td>
  <td  contenteditable='true'>BANQUE NATIONALE D’ALGÉRIE</td>
  <td  contenteditable='true'>BNA</td>
  <td  contenteditable='true'>Siège Social : 8, Boulevard Ernesto Che Guevara, Alger</td>
  <td  contenteditable='true'> 021 43 99 98</td>
  <td  contenteditable='true'> 021 43 94 94</td>
  <td> <button id='modif3' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp3' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr> <tr>
  <td style='display:none;'>11</td>
  <td  contenteditable='true'>CAISSE D’ÉPARGNE ET DE PRÉVOYANCE</td>
  <td  contenteditable='true'>CNEP BANQUE</td>
  <td  contenteditable='true'>Lot n°2 Garidi, Kouba – Alger</td>
  <td  contenteditable='true'>0556 64 36 99</td>
  <td  contenteditable='true'>021 91 64 57 et 58</td>
  <td> <button id='modif4' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp4' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr> <tr>
  <td style='display:none;'>5</td>
  <td  contenteditable='true'>CRÉDIT POPULAIRE D’ALGÉRIE</td>
  <td  contenteditable='true'>CPA</td>
  <td  contenteditable='true'>2, Boulevard Colonel Amirouche, Alger</td>
  <td  contenteditable='true'>021 63 57 12</td>
  <td  contenteditable='true'>021 63 56 98 / 63 58 83</td>
  <td> <button id='modif5' class='btn btn-info modif' name='button'>Modifier</button> </td>
  <td> <button id='supp5' class='btn btn-info supp' name='button'>Supprimer</button> </td>
  </tr>
</form>
  </tbody>

Answer 1

Have you followed the steps in the link provided in the error: http://datatables.net/tn/1?

I would start with that. What is the JSON that is returned?