Overwrite table data with Datatables

Asked

Viewed 506 times

2

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));
            }
        });
    }
}
javascript jquery

  • If the datatables is 1.10.xxx can add the option destroy: true, in the builder.

1 answer

0


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>

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.