jQuery的數據表 - 警告「無法初始化數據表」僅在運行時

Question

我放在一對錶的頁面中，既擔任過服務器端的管理DataTable對象....

一個是可見的，用戶訪問， 第二個隱藏在一個不可見的框架中（它僅用於生成用於.xls導出的結構，因爲需要顯示較少的列，但需要導出所有列）。

，以保持兩個表一致， 到第二DataTable的.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 ... */ }); 

您的抽獎事件處理程序代碼沒有任何意義，我，但因爲你的問題不是這個，我離開的實施細節給你。