我对数据表有一个问题。我也浏览了这个链接,但没有任何结果。我已经包括了将数据直接解析到DOM中的所有先决条件。

脚本

$(document).ready(function() {
  $('.viewCentricPage .teamCentric').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bPaginate": false,
    "bFilter": true,
    "bSort": true,
    "aaSorting": [
      [1, "asc"]
    ],
    "aoColumnDefs": [{
      "bSortable": false,
      "aTargets": [0]
    }, {
      "bSortable": true,
      "aTargets": [1]
    }, {
      "bSortable": false,
      "aTargets": [2]
    }],
  });
});

当前回答

对于那些使用GridView在webform中工作的人:

摩西的回答完全正确。但由于我们正在生成表格,默认情况下不会生成thead标记。所以要解决这个问题,添加[YourGridViewID]. headerrow。TableSection = TableRowSection。TableHeader到后端,在DataBind()方法调用的下面(如果您正在使用它)。这个配置将GridView中Field的HeaderText值作为它在头部内生成的th标签的值。

其他回答

技巧1:

参考这个链接,你会得到一些想法:

https://datatables.net/forums/discussion/20273/uncaught-typeerror-cannot-read-property-mdata-of-undefined

提示2:

检查以下是否正确:

请检查Jquery版本 请检查您的CDN或本地数据表相关的。min和css文件的版本 你的表有<thead></thead> & <tbody></tbody>标签 你的表标题列长度与正文列长度相同 在style='display:none'中使用一些cloudns,同样的属性适用于Header和body。 你的表列没有空,使用一些像[Null,——,NA, Nil] 你的表格没有<td>, <tr>问题

我遇到了同样的问题,但我是动态生成表。在我的例子中,我的表缺少<thead>和<tbody>标签。

下面是我的代码片段,如果它对某人有帮助的话

   //table string
   var strDiv = '<table id="tbl" class="striped center responsive-table">';

   //add headers
   var strTable = ' <thead><tr id="tableHeader"><th>Customer Name</th><th>Customer Designation</th><th>Customer Email</th><th>Customer Organization</th><th>Customer Department</th><th>Customer ContactNo</th><th>Customer Mobile</th><th>Cluster Name</th><th>Product Name</th><th> Installed Version</th><th>Requirements</th><th>Challenges</th><th>Future Expansion</th><th>Comments</th></tr> </thead> <tbody>';


  //add data
  $.each(data, function (key, GetCustomerFeedbackBE) {
                            strTable = strTable + '<tr><td>' + GetCustomerFeedbackBE.StrCustName + '</td><td>' + GetCustomerFeedbackBE.StrCustDesignation + '</td><td>' + GetCustomerFeedbackBE.StrCustEmail + '</td><td>' + GetCustomerFeedbackBE.StrCustOrganization + '</td><td>' + GetCustomerFeedbackBE.StrCustDepartment + '</td><td>' + GetCustomerFeedbackBE.StrCustContactNo + '</td><td>' + GetCustomerFeedbackBE.StrCustMobile + '</td><td>' + GetCustomerFeedbackBE.StrClusterName + '</td><td>' + GetCustomerFeedbackBE.StrProductName + '</td><td>' + GetCustomerFeedbackBE.StrInstalledVersion + '</td><td>' + GetCustomerFeedbackBE.StrRequirements + '</td><td>' + GetCustomerFeedbackBE.StrChallenges + '</td><td>' + GetCustomerFeedbackBE.StrFutureExpansion + '</td><td>' + GetCustomerFeedbackBE.StrComments + '</td></tr>';
                        });

//add end of tbody
 strTable = strTable + '</tbody></table>';

//insert table into a div                 
   $('#divCFB_D').html(strDiv);
   $('#tbl').html(strTable);


    //finally add export buttons 
   $('#tbl').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                                'copy', 'csv', 'excel', 'pdf', 'print'
                            ]
                        });

我得到一个类似的错误。问题是标题行不正确。当我执行下面的标题行时,我遇到的问题得到了解决。

<table id="example" class="table table-striped table-bordered" style="width:100%">
        <thead>
    <tr>
                <th colspan="6">Common Title</th>
            </tr>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</tbody>
</table>

在我的例子中,这个错误的原因是我有两个具有相同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>

我在通过脚手架生成器创建的Rails视图中使用DOM数据时遇到了同样的问题。默认情况下,视图为最后三列(包含显示、隐藏和销毁记录的链接)省略<th>元素。我发现,如果我在<thead>内的<th>元素中为这些列添加标题,它就解决了这个问题。

I can't say if this is the same problem you're having since I can't see your html. If it is not the same problem, you can use the chrome debugger to figure out which column it is erroring out on by clicking on the error in the console (which will take you to the code it is failing on), then adding a conditional breakpoint (at col==undefined). When it stops you can check the variable i to see which column it is currently on which can help you figure out what is different about that column from the others. Hope that helps!