jQuery DataTables无法读取未定义的属性“ mData”，但表是有效标记

如何解决jQuery DataTables无法读取未定义的属性“ mData”，但表是有效标记

我一直在努力追踪这一问题，但没有任何乐趣。据我所知，我的标记是有效的，关于SO的大多数帖子都不是这样。

   <div class="container">
      <br />
      <div style="width:90%; margin:0 auto;">
        <table id="example" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
          <thead>
            <tr>
              <th>StudentId</th>
              <th>Group</th>
              <th>Student</th>
                <th>4</th>
                <th>1</th>
                <th>7</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>4</td>
                <td>testgroup1</td>
                <td>Test Name2</td>
                  <td><input type="text" id="row-4-1a" name="row-4-1a" value="0"></td>
                  <td><input type="text" id="row-4-1b" name="row-4-1b" value="0"></td>
                  <td><input type="text" id="row-4-2" name="row-4-2" value="0"></td>
              </tr>
          </tbody>
        </table>
      </div>
      <button id="mytestbutton" type="submit">Submit form</button>
    </div>

我有一个C＃后端，可以使用Razor生成很多内容，但是我已经使用浏览器的源输出复制了相同的行为。我正在使用的JavaScript如下所示，其中我将一些数据从后端设置为可以使用的js对象，然后在准备就绪的文档上初始化DataTable。

var modelJson = JSON.parse('{"AssessmentId":1,"Name":"test1","Groups":[{"GroupId":1,"Name":"testgroup1","Students":[{"StudentId":4,"Name":"Test Name2","IsActive":true}],"StudentIds":[4],"GroupIds":[1],"Questions":[{"QuestionId":0,"QuestionNumber":"1a","TopicDescription":"Topic goes here","AvailableMarks":4,"AssessmentId":0},{"QuestionId":0,"QuestionNumber":"1b","AvailableMarks":1,"QuestionNumber":"2","AvailableMarks":7,"AssessmentId":0}],"GradeBoundaries":{"A":80,"B":70,"C":0,"A*":90},"MarksAttained":[{"StudentId":4,"MarksAttained":{"1a":0,"1b":0,"2":0}}],"StudentIdsInAssessment":[4]}');
var columns = JSON.parse('[{"QuestionId":0,"AssessmentId":0}]');

function InitialiseDataTable(e,t) {
  var a = [];
  e.forEach(function(e) {
    a.push({
      data: e.QuestionNumber,name: e.QuestionNumber,autoWidth: !0
    })
  }),$("#example").DataTable({
    processing: !0,serverSide: !1,filter: !1,orderMulti: !1,data: {
      test: 100
    },columnDefs: [{
      targets: [0],visible: !1,searchable: !1
    }],columns: a
  })
}
$("#mytestbutton").click(function() {
  var e = $("#example").$("input,select").serialize();
  return alert("The following data would have been submitted to the server: \n\n" + e.substr(0,120) + "..."),!1
});

$(document).ready(() => {
  InitialiseDataTable(columns,1);
});

如果您想查看操作中的错误，这些代码都可以在https://jsfiddle.net/w4q57hdu/的jsfiddle上实时运行。

我一直无法确定为什么会出错，我只能假设初始化DataTable的方式中有问题，但是我看不到树木的影子。我从后端遍历我的column对象，并使用数组中每个对象的QuestionNumber属性来初始化DataTable。

补充一下，我遵循了https://datatables.net/examples/api/form.html上的示例代码。

解决方法

我可以看到一些潜在的问题：

1）columns选项

您构建的columns数据包含一个data选项，该选项已记录在here中。这样可以在包含给定名称的对象的数组中找到该列的数据。

例如，您推入数组的值之一是"data": "1a"。

这意味着DataTables希望第一列从数据源中名为“ 1a”的值中获取其数据。

2）data选项

data选项（请参阅here）告诉DataTables在哪里查找表数据。例如，上面的columns.data选项使用它。该选项应该包含一个数组数组或一个对象数组。它还需要有效的JSON。就您而言，就是这样：data: { test: 100 }。这是无效的JSON。

这也不支持预期的columns.data名称（例如，如上所述的“ 1a”）。

3）HTML表

DataTables还使您可以直接在HTML表中定义数据-此处已完成。这也与使用data选项冲突。

快速测试

注释掉DataTable定义中的data:...和columns:...选项。您将不再遇到任何错误。这只是确认以上注释的快速方法。

如果要在初始化DataTable对象之前将所有数据直接提供到HTML表中，那么可能就只需要这些（就像下面的示例一样）。

前进的方向

如果您想通过JSON将数据和列定义同时动态传递到DataTables（我假设您这样做），则可以执行以下操作：

a）通过删除其所有内部标签（<thead>，<tbody>）来剥离HTML表。通过使用empty HTML table definition，您可以避免当前的冲突。

b）通过使用a.push（或您要用于标题的任何字段）在title: e.QuestionNumber,部分中提供列标题。参见here。

c）使用函数来构建相关列值所需的输入字段。您需要执行此操作，因为您不再在<html>定义中包含这些内容。

对于步骤（c），您可以看到示例here的示例，该示例如何使用render: function(...)在单元格中动态呈现不同类型的数据。

这应该给您一些指示。

这可能无法使您达到最终目标-但您应该能够克服当前的错误，并根据需要提出更具体/针对性的问题（当然，这里尚未提出和回答该问题））。

jQuery DataTables无法读取未定义的属性“ mData”，但表是有效标记

如何解决jQuery DataTables无法读取未定义的属性“ mData”，但表是有效标记

解决方法

相关推荐