jQuery Datentabelle funktioniert nicht (jede Option klickt auf "Keine Daten in Tabelle verfügbar") mit dynamischer Tabelle

Question

Ich habe zwei Tabellen, eine ist dynamisch und eine andere ist statisch. Datentabellenplugin funktionierte gut für eine statische Tabelle, aber wenn ich den gleichen Code für meine dynamische Tabelle implementiere, funktioniere es nicht (irgendeine Option klicke es zeigt an "Keine Daten in der Tabelle verfügbar. Paginierung, Suche, Sortierung, usw. funktioniert nicht). Ich habe bereits mit der zweiten Tabelle HTML getestet, es hat auch funktioniert. Für Datentabelle hier ist mein Codebeispiel (Datatable Skript und Quelle jQuery sowohl für beide Tabellen gleich sind) -

//Used scripts are : 

//<script src="~/Scripts/jquery-3.1.1.min.js"></script> 
//<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script> 
//<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"> 
//<link rel="stylesheet" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"> 

//<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> 

(function ($) { 

      // var table = $('#tbl_issue_Table').DataTable( 
      //or 
      var table = $('#myTable').DataTable( 
        {      
         paging: true, 
         pagingType: "full_numbers", 
         stateSave: true, autoWidth: true 

        }) 
        }); 

Hier ist mein Static Tabellencode Probe, die gut funktioniert (Paginierung, Suche, etc hat gut funktioniert) mit Datentabelle -

<table id="myTable" class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>ENO</th> 
 
      <th>EMPName</th> 
 
      <th>Country</th> 
 
      <th>Salary</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>001</td> 
 
      <td>Anusha</td> 
 
      <td>India</td> 
 
      <td>10000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>002</td> 
 
      <td>Charles</td> 
 
      <td>United Kingdom</td> 
 
      <td>28000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>003</td> 
 
      <td>Sravani</td> 
 
      <td>Australia</td> 
 
      <td>7000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>004</td> 
 
      <td>Amar</td> 
 
      <td>India</td> 
 
      <td>18000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>005</td> 
 
      <td>Lakshmi</td> 
 
      <td>India</td> 
 
      <td>12000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>006</td> 
 
      <td>James</td> 
 
      <td>Canada</td> 
 
      <td>50000</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>007</td> 
 
      <td>Ronald</td> 
 
      <td>US</td> 
 
      <td>75000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>008</td> 
 
      <td>Mike</td> 
 
      <td>Belgium</td> 
 
      <td>100000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>009</td> 
 
      <td>Andrew</td> 
 
      <td>Argentina</td> 
 
      <td>45000</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>010</td> 
 
      <td>Stephen</td> 
 
      <td>Austria</td> 
 
      <td>30000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>011</td> 
 
      <td>Sara</td> 
 
      <td>China</td> 
 
      <td>750000</td> 
 
     </tr> 
 
     <tr> 
 
      <td>012</td> 
 
      <td>JonRoot</td> 
 
      <td>Argentina</td> 
 
      <td>65000</td> 
 
     </tr> 
 
    </tbody> 
 
</table>

Und hier ist das dynamische Tabellencodebeispiel -

//For generating dynamic table: 
 
<script> 
 
    $(document).ready(function() { 
 
     $("#tableDiv").hide(); 
 
var pbsIDval = $("#pbsDropDown").val(); 
 
     var officeIDval = $("#officeDropDown").val(); 
 
     var statusIDval = $("#statusDropDown").val(); 
 
     var startDateval = $("#startDate").val(); 
 
     var endDateval = $("#endDate").val(); 
 

 
     $("#searchButton").click(function() { 
 
      $("#tableDiv").show(); 
 

 
      
 
      var issueCount = 0; 
 
      $("#rowBody").empty(); 
 

 
      $.ajax({ 
 
       type: 'POST', 
 
       url: '@Url.Action("SearchData")', 
 
       datatype: JSON, 
 
       data: { 
 
        PbsId: pbsIDval, 
 
        OfficeId: officeIDval, 
 
        StatusId: statusIDval, 
 
        StartDate: startDateval, 
 
        EndDate: endDateval 
 
       }, 
 

 
       success: function (response) { 
 
        if (response.success == true) { 
 

 
         $.each(response.data, function (rt, val) { 
 

 

 
          
 
          var uri = "http://172.16.1.47:8000/RecordFiles/IssueCreator/b0a9d79c-301a-43c3-bf79-b9672bbe669d.wav"; 
 
          
 

 
          $("#rowBody").append('<tr><td>' + val.Id + '</td>' + '<td>' + val.PbsName + '</td>' + '<td>' + val.OfficeName + '</td>' + '<td>' + val.ProblemName + 
 
           '</td>' + '<td>' + val.StatusName + '</td>' + '<td>' + val.ResolverName + '</td>' + '<td>' + val.OPSName + '<td><audio controls="controls"><source src='+ uri +' type="audio/ogg"></audio></td></tr>') 
 
          
 

 

 
          issueCount++; 
 
         }); 
 

 
        } 
 
        
 
       } 
 

 
      }); 
 
     }); 
 
    }); 
 
</script> 
 

 

 

 
//Datatable script and links both are same for both table

<table class="table table-condensed table-bordered table-hover" id="tbl_issue_Table" cellspacing="0"> 
 
      <thead id="reportTableHeader"> 
 
       <tr class="uiTableHeader"> 
 
        <th>Issue ID</th> 
 
        <th>Pbs Name</th> 
 
        <th>Office Name</th> 
 
        <th>Problem Name</th> 
 
        <th>Status</th> 
 
        <th>Resolver Name</th> 
 
        <th>OPS Name</th> 
 
        <th>Audio Record</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody id="rowBody"> 
 

 
      </tbody> 
 
     </table>

Answer 1

Sie sollten nicht Daten direkt anhängen, wenn Sie Tables verwenden, verwenden Sie native Funktionen statt. Nachdem Sie Antwortdaten in Ajax-Erfolgsfunktion erhalten haben, übergeben Sie sie über rows.add() function. Ich habe ein Beispiel geschaffen (https://jsfiddle.net/zr1mpqu0/), basierend auf dem ersten Tabelle, die zeigt, wie Sie löschen und neue Daten in Ihrer Tabelle hinzufügen:

$('#example').on('click', function(){ 
    table.clear(); 
    table.row.add(["001", "Anusha", "India", "10000"]).draw(); 
});