jQueryデータテーブルが機能しません（任意のオプションをクリックすると「テーブルにデータがありません」というメッセージが表示されます）

Question

2つのテーブルがあり、1つは動的です。データテーブルプラグインは静的なテーブルではうまく動作しましたが、ダイナミックテーブルに同じコードを実装しても機能しません（任意のオプションをクリックすると「テーブルで利用可能なデータがありません」と表示されます）。私はすでに2番目のテーブルをテストして、HTMLも生成しました。ここでは、データテーブルの場合 は（両方が両方のテーブルに同じですDATATABLEスクリプトとjQueryのソース）私のコードサンプルである - ここで

//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 

        }) 
        }); 

で（改ページは、検索などがうまく働いていた）うまく動作私の静的テーブルのコードサンプルがありますデータテーブル -

<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>

そして、ここでは、動的テーブルのコードサンプルである -

//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

あなたはDataTableのを使用する場合は、直接データを追加し、代わりにネイティブ関数を使うべきではありません。 ajax成功関数で応答データを取得した後、rows.add() function経由で渡します。 私はあなたがあなたのテーブルに新しいデータを消去して追加する方法を示して、あなたの最初のテーブルに基づいて、例えば、（https://jsfiddle.net/zr1mpqu0/）を作成しました：

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