如何在。net MVC视图中成功地渲染一个数据表，这个问题让我抓狂。这工作:

 **@model List<Student>
 @{
    ViewData["Title"] = "Index";
}
 <h2>NEW VIEW Index</h2>
 <table id="example" class="display" style="width:100%">
   <thead>
   <tr>
   <th>ID</th>
    <th>Firstname</th>
    <th>Lastname</th> 
  </tr>
  </thead>
  <tbody>
@foreach (var element in Model)
{
    <tr>
    <td>@Html.DisplayFor(m => element.ID)</td>
    <td>@Html.DisplayFor(m => element.FirstName)</td>
    <td>@Html.DisplayFor(m => element.LastName)</td>
    </tr>

}
</tbody>
</table>**

JS文件中的脚本:

**$(document).ready(function () {
    $('#example').DataTable();
});**

无法读取未定义的属性'fnSetData'的常见原因是列数不匹配，就像下面的错误代码:

<thead>                 <!-- thead required -->
    <tr>                <!-- tr required -->
        <th>Rep</th>    <!-- td instead of th will also work -->
        <th>Titel</th>
                        <!-- th missing here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>
        <td>Titel</td>
        <td>Missing corresponding th</td>
    </tr>
</tbody>

下面的代码中，每<td>(列数必须匹配)包含一个<th>:

<thead>
    <tr>
        <th>Rep</th>       <!-- 1st column -->
        <th>Titel</th>     <!-- 2nd column -->
        <th>Added th</th>  <!-- 3rd column; th added here -->
    </tr>
</thead>
<tbody>
    <tr>
        <td>Rep</td>             <!-- 1st column -->
        <td>Titel</td>           <!-- 2nd column -->
        <td>th now present</td>  <!-- 3rd column -->
    </tr>
</tbody>

当使用带有colspan但没有第二行的格式良好的标题时，也会出现这种错误。

对于一个有7列的表，下面的不工作，我们看到“不能读取属性'mData' of undefined”在javascript控制台中:

<thead>
    <tr>
        <th>Rep</th>
        <th>Titel</th>
        <th colspan="5">Download</th>
    </tr>
</thead>

虽然这是有效的:

<thead>
    <tr>
        <th rowspan="2">Rep</th>
        <th rowspan="2">Titel</th>
        <th colspan="5">Download</th>
    </tr>
    <tr>
        <th>pdf</th>
        <th>nwc</th>
        <th>nwctxt</th>
        <th>mid</th>
        <th>xml</th>
    </tr>
</thead>

我有一个动态生成的，但格式糟糕的表，有一个错字。我错误地在另一个<td>内复制了一个<td>标签。列数匹配。我有<thead>和<tbody>标签。所有内容都匹配，除了这个我一时没有注意到的小错误，因为我的专栏中有很多链接和图像标签。

对于列标题，您需要将行包装为<thead>，对于行包装为<tbody>。还要确保您有匹配的编号。列标题<th>，就像对td

在我的例子中，这个错误的原因是我有两个具有相同id名称但表结构不同的表，因为我习惯复制-粘贴表代码。请确保每张桌子有不同的id。

<table id="tabel_data"> <thead> <tr> <th>heading 1</th> <th>heading 2</th> <th>heading 3</th> <th>heading 4</th> <th>heading 5</th> </tr> </thead> <tbody> <tr> <td>data-1</td> <td>data-2</td> <td>data-3</td> <td>data-4</td> <td>data-5</td> </tr> </tbody> </table> <table id="tabel_data"> <thead> <tr> <th>heading 1</th> <th>heading 2</th> <th>heading 3</th> </tr> </thead> <tbody> <tr> <td>data-1</td> <td>data-2</td> <td>data-3</td> </tr> </tbody> </table>

对我来说，这个问题与上面给出的答案略有不同。对我来说，HTML标记很好，但是javascript中的一列缺失了，并且与HTML不匹配。

i.e.

<table id="companies-index-table" class="table table-responsive-sm table-striped">

                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Created at</th>
                                <th>Updated at</th>
                                <th>Count</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($companies as $company)
                                <tr>
                                    <td>{{ $company->id }}</td>
                                    <td>{{ $company->name }}</td>
                                    <td>{{ $company->created_at }}</td>
                                    <td>{{ $company->updated_at }}</td>
                                    <td>{{ $company->count }}</td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>

我的脚本:

<script>
        $(document).ready(function() {
            $('#companies-index-table').DataTable({
                serverSide: true,
                processing: true,
                responsive: true,
                    ajax: "{{ route('admincompanies.datatables') }}",
                columns: [
                    { name: 'id' },
                    { name: 'name' },
                    { name: 'created_at' },
                    { name: 'updated_at' },     <-- I was missing this line so my columns didn't match the thead section.
                    { name: 'count', orderable: false },
                ],
            });
        });
    </script>