Jquery 数据表 - 仅在运行时警告“无法重新初始化数据表”

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 乘客）上发布代码时，如果您在带有搜索、分页或其他操作的页面本身似乎都运行良好！

等待您的建议...

问候，

弗朗西斯科

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 ... */ });

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