如何使dataTable.js在这个例子中工作（动态jQuery表）？

-1

我需要使用数据表添加排序，分页和搜索到我在此示例中创建的表中。但是，我无法让它工作。我花了不少时间缓解了类型错误，没有运气。每当我尝试添加数据表时，出现此错误：如何使dataTable.js在这个例子中工作（动态jQuery表）？

"Uncaught TypeError: Cannot read property 'length' of undefined"

请提出解决方案。我已经使用Bootstrap表和dynatable。我需要datatable来解决我的活dom排序问题。

这里是我的代码：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
</head> 
<body> 
<div class="container"> 
    <form > 
    <div class="form-group"> <!-- Email field !--> 
    <label for="name" class="control-label">Name</label> 
    <input type="name" class="form-control" id="name" name="name" placeholder="John Doe"> 
    </div> 
    <div class="form-group"> <!-- Email field !--> 
    <label for="mail" class="control-label">Mail</label> 
    <input type="mail" class="form-control" id="mail" name="mail" placeholder="[email protected]"> 
    </div> 
    <div class="form-group"> <!-- Email field !--> 
    <label for="mobile" class="control-label">Mobile No.</label> 
    <input type="mobile" class="form-control" id="mobile" name="mobile" placeholder="xxx-xxx-xxxx"> 
    </div> 
    <div class="form-group"> <!-- Submit button !--> 
    <a id="add_row" type="submit" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete</a> 
    </div> 
</form> 
    <div class="row clearfix"> 
    <div class="col-md-12 column"> 
     <table class="table table-bordered table-hover" id="tab_logic" "> 
     <thead> 
      <tr > 
      <th class="text-center"> 
       # 
      </th> 
      <th class="text-center"> 
       Name 
      </th> 
      <th class="text-center"> 
       Mail 
      </th> 
      <th class="text-center"> 
       Mobile 
      </th> 
      </tr> 
     </thead> 
     <tbody> 
     <tr id='addr0'></tr> 
     </tbody> 
     </table> 
    </div> 
    </div> 
</div> 
<script type="text/javascript"> 
$(document).ready(function(){  
    var i=0; 
    $("#add_row").on('click',function(){ 
     var name= $("#name").val(); 
     var mail =$("#mail").val(); 
     var mobile=$("#mobile").val(); 
     console.log("THE NAME IS "+ name); 
     $('#addr'+i).html("<td>"+ (i+1) +"</td><td>" +name+ "</td><td>" +mail+"</td><td> "+mobile+"</td>"); 
     $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
     i++; 

    }); 
    $("#delete_row").click(function(){ 
     if(i>0){ 
    $("#addr"+(i-1)).html(''); 
    i--; 
    } 
    }); 
     $("#tab_logic").dataTable(); 

}); 
</script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 
</html>

我确信，我只使用jQuery一次，从我的研究数据表导入之前。

来源

2016-12-27 John

你确定你所提供的代码中发生的错误？你可以制作一个JSFiddle吗？ – moffeltje

你需要在第一线，以创建列或将其删除：

<table class="table table-bordered table-hover" id="tab_logic" "> 
     <thead> 
      <tr > 
      <th class="text-center"> 
       # 
      </th> 
      <th class="text-center"> 
       Name 
      </th> 
      <th class="text-center"> 
       Mail 
      </th> 
      <th class="text-center"> 
       Mobile 
      </th> 
      </tr> 
     </thead> 
     <tbody> 
     <tr id='addr0'> 
      <td></td> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
     </tbody> 
     </table>

来源

2017-01-01 15:59:22

如何使dataTable.js在这个例子中工作（动态jQuery表）？

回答

相关问题