当前位置: 首页 > 知识库问答 >
问题:

将DataTables与colspan一起使用时,无法读取未定义的属性“mData”

芮宇航
2023-03-14

我正在使用数据来显示来自服务器的数据。问题是我一直在控制台上得到一个错误,说:

datatables.min.js:145未捕获的类型错误:无法读取未定义的属性'mData'

我已经访问了互联网上与此相关的每一个链接,但对我来说没有任何效果。

我已经确保了使用colspans的thead和tbody中的列数是相同的。

我可能遗漏了一些东西,但在花了相当长的时间之后,我会感谢您的帮助。

下面是代码的样子

HTML:

<table id="data-table" class="display table" width="100%">
  <thead>
    <tr>
      <th colspan="4" class="center-align solid-left-border" style="border-bottom: none; text-decoration: underline; text-transform: uppercase; padding: 5px 18px;">
        Tier 2 Contributions Report
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; font-weight: normal; padding: 5px 18px; font-size: 12.5px">
        Employer's FIle No/Registration No:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getSSNITRegistration() || '-' %>
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
        Name of Employer:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getName() || '-' %>
      </th>
    </tr>

    <tr>
      <th class="left-align solid-left-border" style="border-bottom: none; text-decoration: none; text-transform: uppercase; font-weight: normal; padding: 5px 18px; font-size: 12.5px;">
        Address of Employer:
      </th>

      <th colspan="3" class="left-align solid-left-border" style="border-bottom: none; font-weight: normal; padding: 5px 18px; font-size: 12.5px; text-transform: uppercase;">
        <%= company.getAddress() || '-' %>
      </th>
    </tr>


    <tr>
      <th colspan="4" style="border-bottom: none;"></th>
    </tr>
  </thead>

  <tfoot>
   <tr>
     <th colspan="2" class="left-align">Totals</th>
     <th class="center-align"><%= addCommas(totals.basicSalary) %></th>
     <th class="right-align"><%= addCommas(totals.contribution) %></th>
   </tr>
  </tfoot>

  <tbody>
    <tr>
      <th class="left-align">Social Sec. No.</th>
      <th class="left-align">Full Name</th>
      <th class="center-align">Basic Salary</th>
      <th class="right-align">Contribution (5%)</th>
    </tr>

    <% employees.forEach(function(employee) { %>
      <tr>
        <td class="left-align"><%= employee.ssnitNumber %></td>
        <td class="left-align"><%= employee.lastName + ', ' + employee.firstName + ' ' + employee.otherNames%></td>
        <td class="center-align"><%= addCommas(employee.basicSalary) %></td>
        <td class="right-align"><%= addCommas(employee.contribution) %></td>
      </tr>
    <% }) %>
  </tbody>
</table>

JS

$('#data-table').DataTable( {
  "bPaginate": true,
  "bLengthChange": true,
  "bFilter": true,
  "bSort": false,
  "bInfo": true,
  "bAutoWidth": false,
  "dom": 'Bfrtip',
  "buttons": [
    'copy', 'csv', 'excel', 'pdf', 'print'
  ]

});

共有3个答案

苏建安
2023-03-14

我的团队有一个类似的问题,我们可以通过从

因此,作为起点,我建议删除这些属性。此外,我认为您的tfoot标记也可能导致一些问题。最好先把它们取下来看看。

董花蜂
2023-03-14

在我的例子中,这个错误也是由列标题和正文中的列数量不匹配引起的。

晁开宇
2023-03-14

这些问题的一般原因是

>

  • 页眉列和页脚列之间不匹配。

    body元素与头不匹配(一行中的td数应与匹配)

    表Id的重复。

    在您的情况下,请从

  •  类似资料:
    • 问题内容: 我试图在我的react / redux功能组件中显示我的状态(用户): 哑巴用于容器组件中。users.map语句有问题,但是我认为数据是通过connect语句注入的?减速器的初始状态为1个名称: CodeSandbox 问题答案: 渲染时未使用连接的组件,因此道具在组件中不可用 工作演示

    • 我创建了这个小提琴,它按照我的要求工作得很好:小提琴 然而,当我在我的应用程序中使用相同的时,我在浏览器控制台中得到一个错误,说无法读取未定义的属性'aDataSort' 在我的应用程序中,javascript的内容如下:我已经检查了控制器输出。。。它运行良好,也打印在控制台上。

    • 我正在使用jquerydatatables插件。分页不起作用,所以我尝试在使用ajax/jQuery添加行之后初始化datatable,希望在添加所有行并初始化datatable之后,它会起作用。但我得到了一个错误: 我只想分页工作,所以我甚至不确定在通过jQuery添加行时这是否是正确的方法。 HTML jQuery

    • 为什么我得到这个错误不能读取未定义的触摸属性? 为什么它不能读取,但它可以读取 当我们使用

    • 问题内容: 我正在制作非常简单的react应用。但是,当我尝试通过onChange事件调用父(实际上是祖父母)组件的方法时,我一直在获取。 这是触发事件的组件/表单(因此,在绑定的父组件上调用方法…是的,因为我通过道具将其从父组件传递下来,所以在方法上使用了.bound(this)。) 这是我如何通过大多数父(祖父母)组件中的props传递该方法的方法。 这是我作为父项(方法所有者和方法调用程序之

    • 我正在测试发送电子邮件与流星js和nodemailer插件: 流星添加捷运:流星NodeEmailer 当页面加载时,我在导航器的控制台上看到错误:无法读取未定义的属性“创建运输”。 那么问题是什么呢? 代码如下: /////////////////////////////////////////// ///////////////