title: Get data from controller action to jquery datatable
body: <p>I'm trying to get some data from controller action in JSON format then send it to DataTables using AJAX, the data is shown but when I search or sort the data disappears and "no data found" message displayed, also there's no longer any pages it's just one long table.</p>
  
  <p><strong>HTML table:</strong></p>
  
  <pre><code>&lt;table id="demoGrid" class="table  table table-hover dt-responsive nowrap" width="100%" cellspacing="0"&gt;
      &lt;thead&gt;
          &lt;tr class="styleHeaderTab"&gt;
              &lt;th class="th-sm"&gt;
                  Matricule
              &lt;/th&gt;
              &lt;th class="th-sm"&gt;
                  Intitulé
              &lt;/th&gt;
              &lt;th class="th-sm"&gt;
                  Nombre de compte
              &lt;/th&gt;
              &lt;th class=""&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody id="chargeHolder"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>$(document).ready(() =&gt; getActif());
  $('#demoGrid').dataTable({
          "language": {
              "search": "Rechercher",
              "lengthMenu": "Afficher _MENU_ chargés par page",
              "info": "Page: _PAGE_ / _PAGES_",
              "paginate": {
                  "next": "Suivante",
                  "previous": "Précédente"
              }
          }
      });
  function getActif() {
          $.ajax({
              url: '/ChargeAffaire/GetActif',
              method: 'get',
              dataType: 'json',
              error: (err) =&gt; console.log(err),
              success: (res) =&gt; {
                  let s="";
                  for (let i=0;i&lt;res.length;i++) {
                      s +=`&lt;tr&gt;
                              &lt;td&gt;${res[i].matricule}&lt;/td&gt;
                              &lt;td&gt;${res[i].intitule}&lt;/td&gt;
                              &lt;td&gt; 59&lt;/td&gt;
                              &lt;td id="linkContainer"&gt;
                                  &lt;a class="cls no-href" id="detail" onclick="update_url('consulter/${res[i].id}')" data-toggle="modal" data-target="#exampleModal"&gt;consulter&lt;/a&gt;
                                  &lt;br/&gt;
                                  &lt;a class="no-href" id="conge" onclick="updateConge(${res[i].id})" data-toggle="modal" data-target="#dateMission"&gt;Ajouter un congé&lt;/a&gt;
                                  &lt;br/&gt;
                                  &lt;a class="no-href" id="ajout"  onclick="updateAction(${res[i].id})" data-toggle="modal" data-target="#ajoutModal"&gt;Ajouter un compte&lt;/a&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;`;
                  }
                  $("#chargeHolder").html(s);
                  $(".no-href").css({"cursor":"pointer","color":"#077bb1"});
                  $(".no-href").parent().css("text-align","center");
              }
          });
      }
  </code></pre>
  
  <p><strong>Controller's action:</strong></p>
  
  <pre><code>[HttpGet]
          public ActionResult GetActif()
          {
              var list = ListCharges.list.FindAll(x =&gt; x.conge.etat == "Actif");
              return Json(list);
          }
  </code></pre>