合并两个不同信息的dataTables块

Posted 2023-05-07

【中文标题】合并两个不同信息的dataTables块

【英文标题】：Merge two dataTables blocks with different information

【发布时间】：2021-06-08 23:56:57

【问题描述】：

我有两种不同类型的信息，我不知道如何合并。

$('#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"
    
  
)

我知道我不能让两个块，因为会发生reinitialise error。我试图复制第二个块（从"language" 开始）并粘贴到第一个块上，但它不起作用。我也尝试在第二个块上使用一个类，但 dataTable 无法加载它。

这样做的正确方法是什么？

【问题讨论】：

使用下面的结构有什么问题？ $('#usersTable').DataTable( "initComplete": function () ... , "language": ... );。这应该可以正常工作（它对我有用）。你能edit你的问题显示什么不工作以及你得到什么错误？

我唯一的小建议是让您更新 language 选项和 language.aria 选项以使用现代 (v1.10+) 值。因此，例如，processing 而不是 sProcessing。但如果您愿意或需要，您可以使用旧值。

伙计，这有点尴尬，问题是我忘记了逗号：,。无论如何，我借此机会使用了现代价值观。我非常感谢您的帮助。

没问题 - 很高兴你解决了它。

【参考方案1】：

$('#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"
    
  
);