javascript - 当数据存在时隐藏 "No data available in table"消息

Question

这是我的表，我使用 json 获取数据列表并填充此表，

<table id="tblClaimSearch" class="display responsive nowrap" cellspacing="0" width="100%">
    <thead>
       <tr>
          <th><input type="checkbox" id="ChkboxClaimHeader" name="ChkboxClaimHeader" value="false"></th>
          <th>Claim #</th>
          <th>Client Name</th>
          <th>Amount</th>
          <th>Deduction</th>
          <th>Type</th>
          <th>Status</th>
       </tr>
    </thead>
    <tbody>                      

    </tbody>
 </table> 

我的 jquery 有 Json 结果，我得到结果并根据我的数据将行附加到表体，

$(document).ready(function () {
$.ajax({
            url: '@Url.Action("ClaimResultTest", "Claims")',
            data: { seacrhClaimNumber: claimNumberToBeSearched },
            type: 'POST',
            success: function (data) {
                   var dataClaims = data.Claims;//This has the complete list
                   for (i = 0; i < dataClaims.length; i++) {
                    alert(dataClaims[i].ClaimNumber);
                    $("#tblClaimSearch").find('tbody')
                            .append($('<tr>')
                            .append($('<td><input type="checkbox">'))
                            .append($('<td>').text(dataClaims[i].ClaimNumber))
                            .append($('<td>').text(dataClaims[i].Client))
                            .append($('<td>').text(dataClaims[i].Amount))
                            .append($('<td>').text(dataClaims[i].Deduction))
                            .append($('<td>').text(dataClaims[i].Type))
                            .append($('<td>').text(dataClaims[i].Status))
                                )
                     }
                  }
              });
        });

问题是当没有数据时，我有一行显示“表中没有可用数据”。即使附加了数据，我仍然将第一行显示为“表中没有可用数据”。如何做当添加带有数据的新行时，我隐藏此消息行？其次，即使我有 16 个条目，它仍然显示“显示 0 个条目中的 0 个”？。我做错了什么？..

Answer 1

试试这个:-

$(document).ready(function () {
 $.ajax({
        url: '@Url.Action("ClaimResultTest", "Claims")',
        data: { seacrhClaimNumber: claimNumberToBeSearched },
        type: 'POST',
        success: function (data) {


                 $("#tblClaimSearch").find('tbody').empty(); //add this line

               var dataClaims = data.Claims;//This has the complete list
               for (i = 0; i < dataClaims.length; i++) {
                alert(dataClaims[i].ClaimNumber);
                $("#tblClaimSearch").find('tbody')
                        .append($('<tr>')
                        .append($('<td><input type="checkbox">'))
                        .append($('<td>').text(dataClaims[i].ClaimNumber))
                        .append($('<td>').text(dataClaims[i].Client))
                        .append($('<td>').text(dataClaims[i].Amount))
                        .append($('<td>').text(dataClaims[i].Deduction))
                        .append($('<td>').text(dataClaims[i].Type))
                        .append($('<td>').text(dataClaims[i].Status))
                            )
                 }
              }
          });
    });