Question

我在页面中放置了一对表，这两个表都作为服务器端托管的数据表对象....

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

保持两个表格对齐，对第二个数据表的.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 passenger）时，除了在加载或刷新页面时在客户端浏览器上显示的警告消息，两个数据表似乎都正常工作，如果你在页面本身的搜索，分页或其他操作似乎都运行良好！

等待你的建议......

问候，

弗朗西斯

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

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

Jquery数据表 - 警告＆＃34;无法重新初始化数据表＆＃34;仅在运行时

1 个答案: