Javascript jQuery数据表无法读取属性'；mData'；未定义但表是有效标记的

几个星期以来，我一直在努力追踪这一点，但毫无乐趣。就我所知，我的标记是有效的，这对于大多数关于这一点的文章都不是如此

   <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>

如果您希望看到错误的发生，那么这些代码都在JSFIDLE上实时运行

我一直无法确定它在哪里出错的原因，我只能假设在初始化数据表的过程中出现了一些问题，但我看不见树木。我从后端循环我的columns对象，并使用数组中每个对象的QuestionNumber属性初始化DataTable

---

添加以下内容可能会有所帮助：我在代码中遵循了上的示例。

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

1）

列

选项

您构建的

列

数据包含一个

数据

选项，该选项已记录在案。这需要在包含给定名称的对象的数组中找到该列的数据

例如，您推送到数组中的一个值是

“data”：“1a”

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

2）

数据

选项

data

选项（请参阅）告诉DataTables在哪里查找表数据。例如，上面的

列.data

选项使用它。此选项应包含一个数组或一个对象数组。它还需要是有效的JSON。在您的例子中，就是这样：

data:{test:100}

。这不是有效的JSON

这也不支持

列。数据
预期名称（如上文所述的“1a”）

3）HTML表格

DataTables还允许您直接在HTML表中定义数据，您已经在这里完成了定义。这与使用
数据
选项也有冲突

快速测试

注释掉DataTable定义中的
数据：…
和
列：…
选项。您将不再得到任何错误。这只是确认上述注释的一种快速方法

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

单向前进

如果希望通过JSON将数据和列定义动态地传递给DataTables（我假设是这样），则可以执行以下操作：

a） 通过删除HTML表的所有内部标记（
，
）来剥离HTML表。你可以通过一个对话来避免当前的冲突

b） 在
a.push
部分提供列标题，方法是使用
title:e.QuestionNumber、
（或任何要用于标题的字段）。看

c） 使用函数生成相关列值所需的输入字段。您需要这样做，因为
定义中不再有这些

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

这应该给你一些建议

它可能无法帮助您实现最终目标，但您应该能够克服当前的错误，并根据需要提出更具体/有针对性的问题（当然，假设这里还没有提出和回答）

var modelJson = JSON.parse('{"AssessmentId":1,"Name":"test1","Groups":[{"GroupId":1,"Name":"testgroup1","Students":[{"StudentId":4,"Name":"Test Name2","IsActive":true}],"StudentIds":[4],"IsActive":true}],"GroupIds":[1],"Questions":[{"QuestionId":0,"QuestionNumber":"1a","TopicDescription":"Topic goes here","AvailableMarks":4,"AssessmentId":0},{"QuestionId":0,"QuestionNumber":"1b","TopicDescription":"Topic goes here","AvailableMarks":1,"AssessmentId":0},{"QuestionId":0,"QuestionNumber":"2","TopicDescription":"Topic goes here","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,"QuestionNumber":"1a","TopicDescription":"Topic goes here","AvailableMarks":4,"AssessmentId":0},{"QuestionId":0,"QuestionNumber":"1b","TopicDescription":"Topic goes here","AvailableMarks":1,"AssessmentId":0},{"QuestionId":0,"QuestionNumber":"2","TopicDescription":"Topic goes here","AvailableMarks":7,"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);
});