Overwrite table data with Datatables

Question

Every time I make a change in select it calls this function, it takes the id of the selected tax and does the research by (daughters) tax rules, I need to update the table every time it changes but this error happens: Datatables Warning: table id=regrasimpostos - Cannot reinitialise Datatable. For more information about this error, Please see http://datatables.net/tn/3

function pesquisaRegrasImpostos(imposto){
    if (imposto != "") {
        $.ajax({
            url: `/pesquisa/regraimposto/${imposto}`,
            success: function(data){
                $("#regrasimpostos").DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": `/pesquisa/regraimposto/${imposto}`,
                    "columns": [
                        {"data" : "impostoNome"},
                        {"data" : "modelo"},
                        {"data" : "pessoa"},
                        {"data" : "contribuinte"},
                        {"data" : "estado"},
                        {"data" : "cfop"},
                        {
                            "data" : null,
                            defaultContent: `<a href="#" title="Editar" data-id="impostoID" onclick="editarRegra('variavel')"><i class="edit icon"></i></a>`
                        }
                    ]
                })
            },
            error: function(error){
                alert(JSON.stringify(error));
            }
        });
    }
}

Answer 1

You should not initialize the component more than once, just as it also makes no sense to perform two ajax requests to populate the table, see that you do one at the beginning of your Function and the other when declaring the url in the attribute ajax of the builder of DataTable.

Initialize the component only once, when loading the page, and use your api to change the content, ajax.url(). load().

$(document).ready(function() {
  $("#regrasimpostos").DataTable({
    "processing": false,
    "serverSide": false,
    "data" : null,
    "columns": [{
        "data": "impostoNome"
      },
      {
        "data": "modelo"
      },
      {
        "data": "pessoa"
      },
      {
        "data": "contribuinte"
      },
      {
        "data": "estado"
      },
      {
        "data": "cfop"
      },
      {
        "data": null,
        defaultContent: `<a href="#" title="Editar" data-id="impostoID" onclick="editarRegra('variavel')"><i class="edit icon"></i></a>`
      }

    ]
  });
});



function pesquisaRegrasImpostos(imposto) {
  if (imposto != "") {
    var datatable = $("#regrasimpostos").dataTable().api();
    datatable
      .ajax
      .url('/pesquisa/regraimposto/${imposto}')
      .load();

  }
}

@import '//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css'

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="regrasimpostos" class="display">
  <thead>
    <tr>
      <th data-name="impostoNome">Nome</th>
      <th data-name="modelo">Modelo</th>
      <th data-name="pessoa">Pessoa</th>
      <th data-name="contribuinte">Contribuinte</th>
      <th data-name="estado">Estado</th>
      <th data-name="cfop">CFOP</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>