HTML Таблица не очищается полностью

Question

Я использую bootstrapTable или dataTable для генерации таблицы. Содержимое этой таблицы заполняется с помощью метода GET, есть кнопка для заполнения нового содержимого, поэтому необходимо очистить предыдущие данные и записать новые.

Вот здесь и возникает проблема. BootstrapTable или DataTable имеет описание нижнего колонтитула, показывающее сумму строк. Я заметил, когда я пишу новые данные, которые они суммируют с предыдущим контентом. Использовал $("#table1).html("") очистите эти предыдущие данные и напишите новые.

Что случилось, было то, что таблица была "чистой", технически, при просмотре страницы, но описание нижнего колонтитула показывает предыдущие данные, как это Showing 1 to 10 of 66 entries, и доступ к исходному виду все строки все еще там.

Пример:

<table id="table1"> 
  <thead>
    <th> HEAD 1</th>
    <th> HEAD 2</th>
    <th> HEAD 3</th>
    <th> HEAD 4</th>
  </thead>
  <tbody>
    <tr>
      <td> Baar 1 </td>
      <td>  Baar 1 </td>
      <td>  Baar 1</td>
      <td>  Baar 1</td>
      <td>  Baar 1</td>      
    </tr>

    <tr>
      <td>  Baar 2</td>
      <td>  Baar 2 </td>
      <td>  Baar 2</td>
      <td>  Baar 2</td>
      <td>  Baar 2</td>      
    </tr>

     <tr>
      <td> Baar 3 </td>
      <td>Baar 3 </td>
      <td> Baar 3</td>
      <td> Baar 3</td>
      <td> Baar 3</td>      
    </tr>

  </tbody>

</table>

Запуск html("") Это то, что я ожидал

<table id="table1"> 
  <thead>
    <th> HEAD 1</th>
    <th> HEAD 2</th>
    <th> HEAD 3</th>
    <th> HEAD 4</th>
  </thead>
  <tbody>

  </tbody>

</table>

Для тестирования, но кнопка

<button name='button'>Click Here</button>

$(document).ready(function() {
    $('button[name=button]').on('click',function(){
        $('#table1 tbody').html("");
    });

});

Уже протестировано: empty() и remove()