Как сделать dataTable.js работать в этом примере (динамическая таблица jQuery)?

-1

Мне нужно использовать datatable для добавления сортировки, разбивки на страницы и поиска в таблицу, которую я создал в этом примере. Однако я не могу заставить его работать. Я потратил немало времени на устранение ошибки типа без везения. Всякий раз, когда я пытаюсь добавить таблицы данных, я получаю эту ошибку:Как сделать dataTable.js работать в этом примере (динамическая таблица jQuery)?

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

Пожалуйста, предложите решение. Я уже использовал таблицу Bootstrap и выполнял динамический режим. Мне нужна дата, чтобы решить мою проблему сортировки живого дома.

Вот мой код:

<!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 перед импортом DataTables из моего исследования.

источник

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)?

ответ

Смежные вопросы