javascript - Jquery 数据表 - 仅在运行时警告 "Cannot reinitialize Data Table"

Question

我在页面中放置了一对表，它们都充当服务器端管理的数据表对象......

一个是可见的并且用户可以访问， 第二个隐藏在不可见框架中(它仅用于生成用于 .xls 导出的结构，因为需要显示较少的列，但需要导出所有列)。

为了保持两个表对齐， 对第二个数据表的 .draw() 方法的调用已插入到第一个数据表的 .draw 事件处理程序中...

这是 html 中的表定义:

<table id="index_quotes" class="display" data-source="<%= quotes_url(format: 'json')%>">
    <thead>
      <tr>
        <th><%= I18n.t('quote_ref') %></th>
        <th>Status</th>
        <th><%= I18n.t('quote_date') %></th>
        <th><%= I18n.t('quote_customer') %></th>
        <th><%= I18n.t('quote_pcs') %></th>
        <th><%= I18n.t('quote_tot_amnt') %></th>
        <th><%= I18n.t('quote_net_amnt') %></th>
        <th><%= I18n.t('quote_discount') %></th>
      </tr>
    </thead>
    <tbody>
    ...
    </tbody>

  </table>

  <!-- hidden div used to store datatable used for export to .xls functionalities -->
  <div style="display:none;">

      <table id="index_quotes_export" class="display" data-source="<%= quotes_url(format: 'json')%>">
      <thead>
        <tr>
          <th><%= I18n.t('quote_ref') %></th>
          <th>Status</th>
          <th><%= I18n.t('quote_date') %></th>
          <th><%= I18n.t('quote_customer') %></th>
          <th><%= I18n.t('quote_pcs') %></th>
          <th><%= I18n.t('quote_tot_amnt') %></th>
          <th><%= I18n.t('quote_net_amnt') %></th>
          <th><%= I18n.t('quote_discount') %></th>
          <th><%= I18n.t('quote_mat_group') %></th>
          <th><%= I18n.t('quote_seller') %></th>
          <th><%= I18n.t('quote_area_mgr') %></th>
          <th><%= I18n.t('quote_notes') %></th>
          <th><%= I18n.t('quote_feedback') %></th>
          <th><%= I18n.t('quote_private_notes') %></th>
        </tr>
      </thead>
      <tbody>
      ....
      </tbody>
    </table>
  </div>

这是页面的 javascript 部分: (省略列规范以缩短代码部分!)

$(document).ready(function(){
  //
  // datatables initialization
  jQuery(function() {
    // main display table definition
    $("#index_quotes").dataTable({
      bJQueryUI: true,
      bAutoWidth: false,
      bLengthChange: false,
      bProcessing: true,
      bServerSide: true,
      ajax: {
        url: $('#index_quotes').data('source'),
        dataType: 'json',
        cache: false,
        type: 'GET',
        data: function(d) {
          var dt_params;
          $.extend(d, $('#index_quotes').data);
          dt_params = $('#index_quotes').data('dt_params');
          if (dt_params) {
            $.extend(d, dt_params);
          }
        }
      },
      iDisplayLength: 15,
      aaSorting: [[0, "asc"]],
      aoColumns: [
        ....
      ]
    }).on( 'draw.dt', function () {
      var search_filter = $('.dataTables_filter input').val();
      $('#index_quotes_export').DataTable().search(search_filter);
      $('#index_quotes_export').DataTable().draw();
    });
    // export table definition
    $("#index_quotes_export").dataTable({
      bJQueryUI: false,
      bLengthChange: false,
      bProcessing: true,
      bServerSide: true,
      iDisplayLength: -1,
      ajax: {
        url: $('#index_quotes').data('source'),
        dataType: 'json',
        cache: false,
        type: 'GET',
        data: function(d) {
          var dt_params;
          $.extend(d, $('#index_quotes').data);
          dt_params = $('#index_quotes').data('dt_params');
          if (dt_params) {
            $.extend(d, dt_params);
          }
        }
      },
      aoColumns: [
          ....
      ]
    });
  });

请注意:

• 此代码插入到 .html.erb 文件中(ruby on Rails env!)
• 在开发中运行代码时完全没有出现任何错误(一切正常，当我对主数据表进行操作时，隐藏的数据表将按照要求完全对齐地更改!)
• 当我在生产环境(ubuntu linux 16.04 lts + apache + phusion guest)上发布代码时，两个数据表似乎都工作正常，除了加载或刷新页面时客户端浏览器上显示的警告消息(如果您在页面本身的搜索、分页或其他操作似乎都工作正常!

等待您的建议...

问候，

弗朗西斯科

Answer 1

该错误可能是由于竞争条件造成的，其中 $('#index_quotes_export').DataTable().search(search_filter); 的执行速度比表定义 $("#index_quotes_export ").dataTable().

我会在初始化两个表后附加事件处理程序。

$("#index_quotes").dataTable({ /* ... skipped ... */ });
$("#index_quotes_export").dataTable({ /* ... skipped ... */ });

$("#index_quotes").on('draw.dt', function(){ /* ... skipped ... */ });

您在绘制事件处理程序中的代码对我来说没有意义，但由于您的问题与此无关，因此我将实现细节留给您。