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

Question

几个星期以来，我一直在试图找到这个人，但没有找到一个叫joy的人。到目前为止，我可以告诉我的标记是有效的，这不是大多数关于这个的帖子的情况。

   <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对象中，然后在document ready上初始化DataTable。

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);
});

如果你想看到实际的错误，这些代码都是在https://jsfiddle.net/w4q57hdu/的jsfiddle上实时运行的。

我一直无法确定它为什么会出错，我只能假设在我初始化DataTable的方式中有一些东西被破坏了，但是我看不到树的森林。我从后端循环遍历我的columns对象，并使用数组中每个列的QuestionNumber属性初始化DataTable。

补充一句可能会有帮助，我在这段代码中遵循了https://datatables.net/examples/api/form.html中的示例。

Answer 1

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

选项1) columns

您构建的columns数据包含一个记录为here的data选项。它期望在包含给定名称的对象的数组中找到该列的数据。

因此，例如，您推入数组的其中一个值是"data": "1a"。

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

选项2) data

data选项(参见here)告诉DataTables在哪里查找表数据。例如，上面的columns.data选项使用了它。此选项应包含数组数组或对象数组。它还需要是有效的JSON。在您的例子中，它就是：data: { test: 100 }。这是无效的JSON。

这也不支持预期的columns.data名称(例如上面提到的"1a“)。

HTML3)表

DataTables还允许您直接在HTML表中定义数据-您在这里已经这样做了。这也与使用data选项相冲突。

A快速测试

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

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

One Way Forward

如果您希望通过JSON将数据和列定义动态地传递给DataTables (我假设您是这样做的)，那么您可以执行以下操作：

a)通过移除其所有内部标记(<thead>、<tbody>)来剥离HTML表。您可以通过使用empty HTML table definition来避免当前的冲突。

b)使用title: e.QuestionNumber, (或要用于标题的任何字段)在a.push节中提供列标题。参见here。

c)使用函数为相关列值构建所需的输入字段。您需要这样做，因为您在<html>定义中不再包含这些内容。

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

这应该会给你一些指点。

它可能不会让你达到你的最终目标--但你应该能够超越你当前的错误，并根据需要提出更具体/更有针对性的问题(当然，假设这里还没有人问过和回答过)。