DataTables warning: table id=example1 - Cannot reinitialise DataTable.

DataTables warning: table id=example1 - Cannot reinitialise DataTable.

mauriciolederermauriciolederer Posts: 4Questions: 2Answers: 0

Are you all right?
I'm having a problem and I need your help.
My application displays this error message: "DataTables warning: table id = example1 - Cannot reinitialize DataTable. For more information about this error, please see http://datatables.net/tn/3".
I have read in some places that it is important to start "Datatables" only once, but could not find a good solution. I've tried it in many ways, but in most of them I miss the translation to my language (Brazilian Portuguese). My code is following.
Can you tell me what I'm doing wrong?
Thank you all in advance!

<script>
  $(document).ready(function() {
    $('#example1').DataTable( {
        "oLanguage": {
          "sEmptyTable": "Nenhum registro encontrado",
          "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
          "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
          "sInfoFiltered": "(Filtrados de _MAX_ registros)",
          "sInfoPostFix": "",
          "sInfoThousands": ".",
          "sLengthMenu": "_MENU_ resultados por página",
          "sLoadingRecords": "Carregando...",
          "sProcessing": "Processando...",
          "sZeroRecords": "Nenhum registro encontrado",
          "sSearch": "Pesquisar",
          "oPaginate": {
              "sNext": "Próximo",
              "sPrevious": "Anterior",
              "sFirst": "Primeiro",
              "sLast": "Último"
          },
          "oAria": {
              "sSortAscending": ": Ordenar colunas de forma ascendente",
              "sSortDescending": ": Ordenar colunas de forma descendente"
          },
          "select": {
              "rows": {
                  "_": "Selecionado %d linhas",
                  "0": "Nenhuma linha selecionada",
                  "1": "Selecionado 1 linha"
              }
          }
        },  

        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        language: {
            buttons: {
                copyTitle: 'Copiado para área de transferência',
                copyKeys: 'Pressione <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> para copiar os dados da tabela para a área de transferência. <br> <br> Para cancelar, clique nesta mensagem ou pressione Esc.',
                copySuccess: {
                    _: '%d linhas copiadas',
                    1: '1 linha copiada'
                }
            }
        }
        
    } );
    // Setup - add a text input to each footer cell
    $('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
    $('#example1 thead tr:eq(1) th').each( function (i) {
        
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Procurar '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
    } );
    
    var table = $('#example1').DataTable( {

        orderCellsTop: true,

    } );
} );
</script>

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 20,269Questions: 26Answers: 4,765

    The link provides the steps to resolve the issue. The problem is with this:

        var table = $('#example1').DataTable( {
     
            orderCellsTop: true,
     
        } );
    

    This is the second initialization code that you have. Remove this and add the orderCellsTop: true, to the init code above.

    Kevin

  • mauriciolederermauriciolederer Posts: 4Questions: 2Answers: 0

    Kevin, thank you very much for your attention, but in making the suggested change, another feature has stopped working.
    By removing orderCellsTop: true and placing it at the beginning of the code, the search in each column no longer works.
    I think it's because you removed the table variable declaration.
    Would you, or anyone, have any other suggestions?
    Thanks again for your help.

    My code, with the change you suggested, went like this.

    $(document).ready(function() {
        $('#example1').DataTable( {
            orderCellsTop: true,
    
            "oLanguage": {
              "sEmptyTable": "Nenhum registro encontrado",
              "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
              "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
              "sInfoFiltered": "(Filtrados de _MAX_ registros)",
              "sInfoPostFix": "",
              "sInfoThousands": ".",
              "sLengthMenu": "_MENU_ resultados por página",
              "sLoadingRecords": "Carregando...",
              "sProcessing": "Processando...",
              "sZeroRecords": "Nenhum registro encontrado",
              "sSearch": "Pesquisar",
              "oPaginate": {
                  "sNext": "Próximo",
                  "sPrevious": "Anterior",
                  "sFirst": "Primeiro",
                  "sLast": "Último"
              },
              "oAria": {
                  "sSortAscending": ": Ordenar colunas de forma ascendente",
                  "sSortDescending": ": Ordenar colunas de forma descendente"
              },
              "select": {
                  "rows": {
                      "_": "Selecionado %d linhas",
                      "0": "Nenhuma linha selecionada",
                      "1": "Selecionado 1 linha"
                  }
              }
            },  
    
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            language: {
                buttons: {
                    copyTitle: 'Copiado para área de transferência',
                    copyKeys: 'Pressione <i>ctrl</i> ou <i>\u2318</i> + <i>C</i> para copiar os dados da tabela para a área de transferência. <br> <br> Para cancelar, clique nesta mensagem ou pressione Esc.',
                    copySuccess: {
                        _: '%d linhas copiadas',
                        1: '1 linha copiada'
                    }
                }
            }
            
        } );
        // Setup - add a text input to each footer cell
        $('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
        $('#example1 thead tr:eq(1) th').each( function (i) {
            
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Procurar '+title+'" />' );
     
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } )
    } );
    
  • kthorngrenkthorngren Posts: 20,269Questions: 26Answers: 4,765
    Answer ✓

    You can declare the variable in line 2, for example:
    var table = $('#example1').DataTable( {

    Kevin

  • mauriciolederermauriciolederer Posts: 4Questions: 2Answers: 0

    Kevin, how could I thank you for the immense help you gave me? Thank you. Worked perfectly. Sorry for my inexperience. I learned a lot from you.

  • kthorngrenkthorngren Posts: 20,269Questions: 26Answers: 4,765
    Answer ✓

    Glad it all worked out :smile:

    Kevin

This discussion has been closed.