时间戳

首页 > 解决方案 > Jquery Datatable：对象不支持属性或方法'Draw' asp.net

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

问题描述

使用以下代码：

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

错误：对象不支持属性或方法“绘制”

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

数据表列标题显示正常

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

标签： jqueryhtmlasp.netdatatable

解决方案

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

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>

推荐阅读