Merge two dataTables blocks with different information

Question

I have two different types of informations and I don't know how to merge then.

$('#usersTable').DataTable( {
  initComplete: function () {
    this.api().columns([5, 6]).every( function () {
      var column = this;
      var select = $('<select><option value=""></option></select>')
      .appendTo( $(column.header()) )
      .on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
          );

        column
        .search( val ? '^'+val+'$' : '', true, false )
        .draw();
      } );
      $( select ).click( function(e) {
        e.stopPropagation();
      });

      column.data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
      } );
    } );
  }
} );

// TABLE TRANSLATION
$('#usersTable').DataTable({
  "language": {
    "decimal": ",",
    "thousands": ".",
    "sEmptyTable": "Nenhum registro encontrado",
    "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"
    }
  }
})

I know I cannot let two blocks because will occurs a reinitialise error. I tried to copy the second block (starting on "language") and paste on the first block, but it doesn't work. I also tried to use a class on the second block but dataTable cannot load it.

What is the correct way to do this?

What problem do you have when you use the following structure? `$('#usersTable').DataTable( { "initComplete": function () { ... }, "language": { ... } } );`. That should work OK (it works for me). Can you [edit] your question to show what is _not_ working and what error you get? — andrewJames, Mar 11 '21 at 01:22
The only minor suggestion I have is for you to update the [`language`](https://datatables.net/reference/option/language) options and [`language.aria`](https://datatables.net/reference/option/language.aria) options to use the modern (v1.10+) values. So, for example, `processing` instead of `sProcessing`. But you can use the old values if you prefer, or need to. — andrewJames, Mar 11 '21 at 01:22
Man, this is a little embarrassing, the problem was that I forgot the comma: ``,``. Anyway, I took the opportunity to use modern values. I really appreciated your help. — ARNON, Mar 11 '21 at 02:00

score 1 · Accepted Answer · answered Jul 01 '21 at 09:23

$('#usersTable').DataTable( {
  initComplete: function () {
    this.api().columns([5, 6]).every( function () {
      var column = this;
      var select = $('<select><option value=""></option></select>')
      .appendTo( $(column.header()) )
      .on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
          );
        column
        .search( val ? '^'+val+'$' : '', true, false )
        .draw();
      } );
      $( select ).click( function(e) {
        e.stopPropagation();
      });
      column.data().unique().sort().each( function ( d, j ) {
        select.append( '<option value="'+d+'">'+d+'</option>' )
      } );
    } );
  },
  // TABLE TRANSLATION
  "language": {
    "decimal": ",",
    "thousands": ".",
    "sEmptyTable": "Nenhum registro encontrado",
    "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"
    }
  }
});

Merge two dataTables blocks with different information

1 Answers1