奇怪的 jQuery dataTables 渲染问题答案

【问题标题】：weird jQuery dataTables rendering issue奇怪的 jQuery dataTables 渲染问题
【发布时间】：2010-10-29 18:40:44
【问题描述】：

我正在开发一个使用菜单 (fg.menu) 和 jQuery UI 选项卡的 Web 应用程序。这些效果很好。我现在正在尝试将 dataTables 插件应用到我在标签中加载（通过 Ajax）的表。这些表是在服务器端生成的（JSON 现在不是一个选项）并位于我加载到选项卡中的静态文件中。这些表具有指向其他表的向下钻取链接。这些通过我的选项卡选项中的事件处理加载到当前选项卡中：

load: function(event, ui) 
{
  //alert ("load is called");

  $('a', ui.panel).live('click', function() 
  {      
      // now load the href into the tab
      $(ui.panel).load(this.href);
      // alert ("live click is called");

      // Set up the dataTable
      oTable = $('.my_table').dataTable( 
      { 
         "sScrollX": "100%",
         "bPaginate": false,
         "bJQueryUI": true,
         "bInfo": false,
         "bDestroy": true,
         "bRetrieve": true,
         "sDom": '<"H"r>t'
       } );

  return false;
  });

}  // end of load:

我还通过菜单链接加载器（具有不同的事件）初始化数据表，它工作正常，任何初始选项卡选择渲染也是如此。

当我点击表中的链接时，子表会显示在选项卡中，但dataTable没有生效。我注意到，当我单击新选项卡时，表格会在新选项卡加载之前短暂闪烁 dataTable 渲染。因此，我添加了警报（在上面的代码中注释掉）以查看事件是如何触发的，你瞧，dataTables 开始正确呈现。当我删除警报时，它会返回到普通表。

我已经尝试将 dataTable init 移动到我能想到的任何地方，在不同的地方显式调用 fnDraw()，并将 dataTable init 复制到任何地方，但除了警报之外似乎没有任何东西使它呈现。

我在 Firefox 3.6.12 中使用 dataTables 1.7.3、jQuery 1.4.2 和 jQuery UI 1.8.5。

我猜这是某种事件问题，但我不知道警报会强制数据表呈现发生的任何事情。有任何想法吗？我错过了一些愚蠢的事情吗？ :-)

【问题讨论】：

标签： jquery events datatable tabs jquery-ui-tabs

【解决方案1】：

好的，我似乎找到了解决方法。我最初尝试在包含表格片段的每个 html 文件中执行 dataTable init。当我第一次尝试它时它不起作用，但是当我再次尝试它时，它起作用了（不知道为什么，但我还是会接受它。那个事件/渲染问题仍然困扰着我，但至少现在我没有不必担心这个应用程序。接下来：让后退按钮不仅可以跟踪选项卡，还可以跟踪选项卡内的内容链接:-)

【讨论】：