Question

使用以下代码：

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数据表显示5行，我想检查数据表的搜索和排序方式。数据显示在表单上，但是我在此行代码上收到上面的错误：

companytable.Draw();

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

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

数据表列标题显示为正常

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

Answer 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>

Answer 2

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

var ctable = new $ .fn.dataTable.Api（'＃tblCompany'）; ctable.draw（）;

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

“ type =” text / javascript“>

然后我删除了ResolveUrl 只是输入错误

jQuery数据表：对象不支持asp.net的属性或方法“ Draw”

2 个答案: