Preenchimento de bootstrapTable com filtros externos

Front-end JavaScript
,
#1

Boa tarde, pessoal! Estou com dificuldade de entender o funcionamento do preenchimento dinâmico de uma bootstrapTable.
Possuo uma tabela com as seguintes informações

<table id="tarifas1"
 data-toggle="table"
 data-search="true"
 data-show-refresh="false"
 data-show-toggle="false"
 data-show-columns="false"
 data-sort-name="id"
 data-page-list="[10, 50, 100]"
 data-page-size="10"
 data-pagination="false" data-show-pagination-switch="false" class="table-bordered ">
<thead>
     <tr>
          <th data-field="ids" data-radio="true"></th>
          <th data-field="id" data-sortable="true">Tarifa</th>
          <th data-field="nome" data-sortable="true">Nome</th>
          <th data-field="acomodacaoCategoria" data-sortable="true">Categoria</th>
          <th data-field="inicio" data-sortable="true">Vigência inicial</th>
          <th data-field="final" data-sortable="true">Vigência final</th>
     </tr>
</thead>

Ao carregar a tela, passo uma List com todas as tarifas cadastradas, e utilizo o c:forEach para preencher as linhas. Até aqui, nada demais. Com a tela totalmente carregada, ao inspecionar a tabela (F12), noto que a própria tabela acrescentou informações automaticamente (por exemplo, o radio button é criado automaticamente com todas essas informações, somente especificando para o campo data-radio="true"):

<tr data-index="0">
     <td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="radio" data-parsley-multiple="btSelectItem"></td>
     <td style="">1</td><td style="">Associação - Periodo 10</td>
     <td style="">testeetetetetet</td><td style="">22/03/2018</td>
     <td style="">22/03/2018</td>
</tr>

Minha dúvida é a seguinte. Possuo dois campos de datas utilizados para filtrar o periodo de vigência das tarifas apresentadas e um botão para disparar o evento de atualização da tabela. Quero carregar esta tabela dinamicamente com base nas datas selecionadas, sem recarregar totalmente a tela. Estou tentando utilizar AJAX, mas todas as formas que tento fazer não funcionam. O mais perto que consegui foi da seguinte forma:

var dataDe = document.getElementById('vigenciaInicial').value;
var dataAte = document.getElementById('vigenciaFinal').value;
$('#corpoTarifa1').empty(); //Limpando a tabela
$.ajax({
    type: 'GET',
    url: 'retornaTarifa.htm',
    async: true,
    dataType: 'JSON',
    data: {vigenciaInicial: dataDe, vigenciaFinal: dataAte},
    success: function (dados) {
        var count = Object.keys(dados.tarifa).length;
        for (var i = 0; i < count; i++) {
            $("#tarifas tbody").append('<tr>' +
    '<td></td>'
    + '<td>' + dados.tarifa[i].id + '</td>'
    + '<td>' + dados.tarifa[i].nome + '</td>'
    + '<td>' + dados.tarifa[i].acomodacaoCategoria + '</td>'
    + '<td>' + dados.tarifa[i].inicio + '</td>'
    + '<td>' + dados.tarifa[i].final + '</td>'
    + '</tr>');
        }
        $("#tarifas").load();
    },
    error: function (ex) {
        alert("Erro: " + ex.status);
    }
});

Esse código limpa o corpo da tabela e faz listar os valores vindos da pesquisa no banco de dados, sendo formatados como um JSON. Porém, a primeira célula passada como '<td></td>' não recria o radio button que existia anteriormente. Além disso, ao utilizar a ordenação da própria tabela, ao clicar no cabeçalho, os novos valores somem, e os antigos retornam, voltando como era antes (não utilizando o filtro).

Com base em todos os testes e pesquisas realizadas, creio que a melhor forma para utilizar deste filtro seria preencher a tabela com base no JSON através de AJAX. Estou correto? Se sim, como seria a melhor forma para proceder? Acredito que o problema esteja nesse “preenchimento inicial da tabela”, creio que a bootstrapTable “armazene” os valores iniciais e reliste a partir deles, então o propósito deste filtro externo seria atualizar os dados da table toda vez que este evento fosse disparado.

Desde já, agradeço quaisquer contribuições, e estou a disposição para solucionar quaisquer dúvidas quanto ao código