Hide "No data available in table" message when data is present

Question

This is my table , I get the data list using json and populate this table,

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

My jquery which has Json result, I get the result and append rows to table body based on my data,

$(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))
                                )
                     }
                  }
              });
        });

The problem is when there is no data, I have a row displaying "No data available in table"..And even when there is data appended I still have first row as "No data available in table"..How do I hide this message row when new rows with data have been added??And secondly even though I have 16 entries it still shows "Showing 0 of 0 entries"?.What am I doing wrong?..

Answer 1

try this:-

$(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))
                            )
                 }
              }
          });
    });