当有填充的tbody时，为啥jQuery DataTable会显示“表中没有可用数据”

Posted 2023-05-09

【中文标题】当有填充的tbody时，为啥jQuery DataTable会显示“表中没有可用数据”

【英文标题】：Why does jQuery DataTable show "No data available in table" when there is a populated tbody当有填充的tbody时，为什么jQuery DataTable会显示“表中没有可用数据”

【发布时间】：2017-08-03 23:54:34

【问题描述】：

所以我在一个通过 erb 填充的苗条文件中有一个表。当我在其上初始化 DataTable 时，它​​会在表中附加一个新的 tbody，其内容为“表中没有可用数据”。这是 html.slim 部分

table#search.table.table-striped.search
  thead
    tr
      th Header
      th Header
      th Header
      th Header
      th Header
      th Header
      th Header
      th Header
      th Header
      th Header
      th Header
  tbody
  - @search_result.each do |result|
    tr
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]
      td
        = result[data]

这是我的 js：

var SearchPage = function() 
  this.$table = $('#search');
  this.init();


SearchPage.prototype = 
  init: function() 
    this.$table.DataTable(
      autoWidth: false,
      paging: false,
      info: false,
      searching: false
    );
  


$(function() 
  var newSearch = new SearchPage();
);

我不确定我的语法错误在哪里。 DataTable 应该能够在不这样做的情况下从 DOM 中获取数据，并且尽我所能告诉他们这符合他们的文档。我做错了什么？>

【参考方案1】：

事实证明，问题根本不在于 DataTable。问题在于 slim 呈现 HTML 的方式。具备以下条件：

tbody
  @search_result.each do |result|

会渲染两个 tbody 元素，第一个是空的。 DataTable 试图读取空的，并产生了错误。