Jquery Datatable：对象不支持属性或方法'Draw' asp.net答案

【问题标题】：Jquery Datatable: Object doesn't support property or method 'Draw' asp.netJquery Datatable：对象不支持属性或方法'Draw' asp.net
【发布时间】：2019-05-28 06:45:28
【问题描述】：

使用以下代码：

HTML：

  <head runat="server">
    <title>datatable loading searching, sorting and updating </title>      
        <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css" />
        <link rel="stylesheet" type="text/css" href="scroller.dataTables.min.css" />

 <script src="js/jquery-3.3.1.js")%>" type="text/javascript"></script>
     <script src="js/jquery.dataTables.min.js")%>" type="text/javascript"></script>

HTML：

        <script type="text/javascript">
              $(document).ready(function () {
                  BindCompanyTable();
                    //Adding  Data manually to datatable
                  appendCompanyData()
              // this is for document ready
               });


         function BindCompanyTable() {

                    myTable = $("#tblCompany").DataTable({
                        "deferRender": true,
                        "paging": true,
                        "lengthChange": false,
                        "searching": true,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "sDom": 'lfrtip'
                        //"sPaginationType" : "full_numbers"
                    });
                }

          function appendCompanyData() {
                  alert('inside appendCompanyData');
                    //'DATA SHOWING'
                    var companytable = $('#tblCompany tbody');
                    companytable.append('<tr><td>1 </td><td> CompanyA</td><td>Bryant</td></tr>'); 
                    companytable.append('<tr><td>2 </td><td> CompanyB</td><td>Little Rock</td></tr>'); 
                    companytable.append('<tr><td>3 </td><td> CompanyC</td><td>Little Rock</td></tr>'); 
                    companytable.append('<tr><td>4 </td><td> CompanyD</td><td>Little Rock</td></tr>'); 
                    companytable.append('<tr><td>5 </td><td> CompanyE</td><td>Little Rock</td></tr>'); 

        //this line is giving an error
        //Error: Object doesn't support property or method 'Draw'

                    companytable.Draw();

 }

   </script>

</head >



   <table id="tblCompany"  border="1" style="border-collapse:">
     <thead>
        <tr>
        <th id="thcompany">CompanyRecordID</th>
        <th>CompanyName</th>
        <th>City</th>                       
         </tr>
        </thead>                
      <tbody></tbody>
     </table>

使用 jquery Datatable 显示 5 行，我想检查搜索和排序如何与数据表一起使用。数据显示在表单上，但我在这行代码上得到了上面的错误：

companytable.Draw();

错误：对象不支持属性或方法'Draw'

另外，当我在搜索输入框中输入关键字时，5 个数据行消失了，我看到：“表中没有可用数据”显示在数据表中。

数据表列标题显示正常

我是否缺少 Jquery 插件或可能没有添加正确的插件。

【问题讨论】：

标签： jquery html asp.net datatable

【解决方案1】：

您正在表 tbody 而不是表上调用 draw 方法

var companytable = $('#tblCompany tbody');

相反，您应该像这样在 tblCompany 元素上调用它：

$('tblCompany').draw()

另外，我不知道你为什么在脚本标签的 src 属性末尾有%>

<script src="js/jquery-3.3.1.js")%>" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js")%>" type="text/javascript"></script>

【讨论】：

【解决方案2】：

我使用以下代码行解决了这个问题：

var ctable = new $.fn.dataTable.Api('#tblCompany'); ctable.draw();

脚本标签中 src 属性末尾的 %> 也是我的错误，因为这行代码是从另一行使用这种语法的代码复制而来的。

" type="文本/javascript">

后来我删除了 ResolveUrl 只是打字错误

【讨论】：

我不确定您的答案与上面提供的答案有何不同。 $('tblCompany').draw() 也可以解决问题。