title: jQuery how to fix Cannot set property '_DT_CellIndex' of undefined?
body: <p>I'm new in Jquery and I want once the user adds new row and give the important information once he clicks on "Ajouter" button it will add on data base then reload the table automatically.
  Once i run that I found that the data added successfully to the database however  "tablebqup" does not reload anymore and it I found this error :</p>
  
  <pre><code>Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
  </code></pre>
  
  <p>Here is the function to add the new element:</p>
  
  <pre><code>    $("#newbq").click(function () {
      var indexadd= $('table#tablebqup tr:last').index() + 1;
      //Now add this row to the table:
      var row='&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td  contenteditable="true"&gt;&lt;/td&gt;&lt;td  contenteditable="true"&gt;&lt;/td&gt;&lt;td  contenteditable="true"&gt;&lt;/td&gt;&lt;td  contenteditable="true"&gt;&lt;/td&gt;&lt;td  contenteditable="true"&gt;&lt;/td&gt;&lt;td colspan="2"&gt; &lt;button id="add'+indexadd+'" class="btn btn-info addbc" name="button"&gt;Ajouter&lt;/button&gt; &lt;/td&gt;&lt;/tr&gt;';
      $('#tablebqup').append(row);
      $(".addbc").click(function () {
        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());
      //  if (nombc=="" || abrv=="" || sigsoc=="" || (telf=="" &amp;&amp; fx==""))
      if (nombc=="")
        {
          alert("Rempier toutes les informations de la banque d'abord")
        }
        else {
          $choix=confirm("voulez vous vraiment ajouter la banque");
           if ($choix)
           {
             console.log(nombc);
             $.post(basUrl+'views/component/updtbq.php',
               {
                 action:'add_bq',
                 nomb:nombc,
                 abrvb:abrv,
                 sigsocial:sigsoc,
                 tel:telf,
                 fax:fx,
               }, function(data) {
                 alert(data);
               $('#tablebqup').DataTable().ajax.reload();//My problem is here
              });
            }
         }
        });
    });
  </code></pre>
  
  <p>In the fist time one i run it  it showed something like this :</p>
  
  <pre><code>“Uncaught TypeError: $(…).DataTable is not a function”
  </code></pre>
  
  <p>To solve it i added the appropriate link and script:</p>
  
  <p></p>
  
  
  
  
  
  
  
  <p>Doing that the error has changed to :</p>
  
  <pre><code>Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
  </code></pre>
  
  <p>What surprised me that i have used above similar logic I mean use the same:</p>
  
  <pre><code> $('#tablebqup').DataTable().ajax.reload(); 
  </code></pre>
  
  <p>and once I  click another button just to modify information on data base in this way :</p>
  
  <pre><code> $(".modif").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:'update_bq',
             idbc:id,
             nomb:nombc,
             abrvb:abrv,
             sigsocial:sigsoc,
             tel:telf,
             fax:fx,
           }, function(data) {
           $('#tablebqup').DataTable().ajax.reload();
          });
        }
  </code></pre>
  
  <p>That work perfectly without adding any of this two links!!!</p>
  
  <p></p>
  
  
  
  <p>Here is the dtail of the error:</p>
  
  <pre><code>Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
      at Ga (datatables.min.js:36)
      at M (datatables.min.js:28)
      at HTMLTableRowElement.&lt;anonymous&gt; (datatables.min.js:28)
      at jquery-3.2.1.min.js:2
      at Function.map (jquery-3.2.1.min.js:2)
      at r.fn.init.map (jquery-3.2.1.min.js:2)
      at ma (datatables.min.js:28)
      at e (datatables.min.js:104)
      at HTMLTableElement.&lt;anonymous&gt; (datatables.min.js:104)
      at Function.each (jquery-3.2.1.min.js:2)
  </code></pre>
  
  <p>Here is my php file:</p>
  
  <pre><code>function add_bq()
  {
    if((isset($_POST['nomb']))
    &amp;&amp;(isset($_POST['abrvb']))
    &amp;&amp;(isset($_POST['sigsocial']))
    &amp;&amp;(isset($_POST['tel']))
    &amp;&amp;(isset($_POST['fax']))
    ){
      $nomb=trim($_POST['nomb']);
      $abrv=trim($_POST['abrvb']);
      $sigc=trim($_POST['sigsocial']);
      $tel=trim($_POST['tel']);
      $fax=trim($_POST['fax']);
      //Update les banques
      MainController::addBanque($nomb,$abrv,$sigc,$tel,$fax);
     include 'C:/wamp/www/Mini_Prj/views/component/tbbanqueupd.php';
    }
  </code></pre>
  
  <p>and here is the included:"tbbanqueupd.php":</p>
  
  <pre><code>&lt;?php
  require_once("C:/wamp/www/Mini_Prj/controllers/mainController.php");
  $bnqs=MainController::getBanque();
  echo'
  &lt;div&gt;
  &lt;h3&gt;  Mise a jours des banques&lt;/h3&gt;
  &lt;div &gt;
  
    &lt;div class="table-responsive"&gt;
    &lt;table id="tablebqup" class="tableau table table-fixed table-bordered table-dark table-hover "&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt;Id Banque&lt;/th&gt;
        &lt;th&gt;Nom de la banque&lt;/th&gt;
        &lt;th&gt;Abrev &lt;/th&gt;
        &lt;th&gt;Siège Sociale&lt;/th&gt;
        &lt;th&gt;Tel&lt;/th&gt;
        &lt;th&gt;Fax&lt;/th&gt;
        &lt;th&gt;Modifier&lt;/th&gt;
        &lt;th&gt;Supprimer&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
    &lt;form method="post"&gt;
    ';
    $i=0;
  foreach ($bnqs as $bnq) {
  
  echo
  " &lt;tr&gt;
  &lt;td&gt;".$bnq['idbc']."&lt;/td&gt;
  &lt;td  contenteditable='true'&gt;".$bnq['nomb']."&lt;/td&gt;
  &lt;td  contenteditable='true'&gt;".$bnq['abrvb']."&lt;/td&gt;
  &lt;td  contenteditable='true'&gt;".$bnq['sigsocial']."&lt;/td&gt;
  &lt;td  contenteditable='true'&gt;".$bnq['tel']."&lt;/td&gt;
  &lt;td  contenteditable='true'&gt;".$bnq['fax']."&lt;/td&gt;
  &lt;td&gt; &lt;button id='modif$i' class='btn btn-info modif' name='button'&gt;Modifier&lt;/button&gt; &lt;/td&gt;
  &lt;td&gt; &lt;button id='supp$i' class='btn btn-info supp' name='button' onclick='suprimer(this.id)'&gt;Supprimer&lt;/button&gt; &lt;/td&gt;
  &lt;/tr&gt;";
  $i++;
  }
  echo'
  &lt;/form&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;button type="button" class="btn btn-info" name="button" id="newbq" &gt;Nouvelle banque&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;';
  </code></pre>
  
  <p>I thought that maybe the problem is because i allow the user to not filling all the informations, but i want that it gonna be in this way the user enters just the important field.
  How could I solve this problem?Can someone help.</p>