使用.each方法時數據表沒有使用數據實例化

我在使用jQuery中的.each方法將數據添加到我的表中時出現問題，然後實例化DataTable後綴。查看頁面時，數據將顯示在表格中，而不顯示數據表的過濾選項。使用.each方法時數據表沒有使用數據實例化

如果還有更好的方法，我不需要使用.each()方法。這正是當時對我最有意義的東西。

<!DOCTYPE html> 
<html> 
    <head> 


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script> 
    <script src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" > 
    <script src="js/users.js"></script> 
</head> 

    <body> 

     <table id="table"> 
      <thead> 
       <tr> 
        <th>id</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Email</th> 
        <th>Gender</th> 
       </tr> 
      </thead> 
      <tbody> 
      </tbody> 
     </table> 

    </body> 

    <script> 

     $(document).ready(function() { 

       $('tbody').append($('<tr>', {id: "test"})); 
       var $arr_length = users.length; 
       for(i = 0; i <= $arr_length; i++) { 
         var $row = $('tr').get(i+1); 

         $.each(users[i], function(index, value) { 
          $($row).append("<td>" + value + "</td>"); 
         }); 

         $($row).after($('<tr>', {id: "test"})); 

       }; 

       $('#table').DataTable(); 

     }); 

    </script> 

</html>

來源

2017-02-25 Joshua Alcott-Griffin

如果你想添加新行，請按照下列步驟操作： - https://datatables.net/reference/api/row.add（） –

我需要能夠使用數組中的數據填充表，然後我需要實例化將數據表放到該預先存在的表上。 –

爲什麼不把數據傳遞給數據庫並讓它處理呢？ – Bindrid

我沒有看到你的用戶變量，所以我想它的對象（每個錶行一個）的陣列。

第一個錯誤是：ID必須是唯一的，而不是你創建具有相同ID錶行：

$($row).after($('<tr>', {id: "test"}));

由於您使用jQuery.each()也沒用外部for循環。

到你的問題的解決方案可以根據data：

$(function() { 
 
    var users = [{"id": '1', 'firstname': 'firstname1', 'lastname': 'lastname1', 'email': 'email1', 'gender': 'male'}, 
 
     {'id': '2', 'firstname': 'firstname2', 'lastname': 'lastname2', 'email': 'email2', 'gender': 'male'}, 
 
     {'id': '3', 'firstname': 'firstname3', 'lastname': 'lastname3', 'email': 'email3', 'gender': 'female'}]; 
 

 
    $('#table').dataTable({ 
 
     data: users, 
 
     columns: [ 
 
      { data: 'id' }, 
 
      { data: 'firstname' }, 
 
      { data: 'lastname' }, 
 
      { data: 'email' }, 
 
      {data: 'gender'} 
 
     ]}); 
 
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 

 
<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Email</th> 
 
     <th>Gender</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

基於驗證碼的固定解決方案可以是：

$(function() { 
 
    var users = [{'id': '1', 'firstname': 'firstname1', 'lastname': 'lastname1', 'email': 'email1', 'gender': 'male'}, 
 
     {'id': '2', 'firstname': 'firstname2', 'lastname': 'lastname2', 'email': 'email2', 'gender': 'male'}, 
 
     {'id': '3', 'firstname': 'firstname3', 'lastname': 'lastname3', 'email': 'email3', 'gender': 'female'}]; 
 
    $.each(users, function (index, value) { 
 
     $('#table tbody').append($('<tr/>', {id: value.id}) /* create first td */ 
 
       .append($("<td/>", {text: value.id})) /* create second td */ 
 
       .append($("<td/>", {text: value.firstname}))/* .... */ 
 
       .append($("<td/>", {text: value.lastname})) 
 
       .append($("<td/>", {text: value.email})) 
 
       .append($("<td/>", {text: value.gender}))); 
 
    }); 
 
    $('#table').dataTable(); 
 
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css"> 
 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 

 
<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>id</th> 
 
     <th>First Name</th> 
 
     <th>Last Name</th> 
 
     <th>Email</th> 
 
     <th>Gender</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

來源

2017-02-25 22:26:31 gaetanoM

修好了！謝謝。用戶數組是一個單獨的js文件，它只有一個包含值的數組。 –

使用.each方法時數據表沒有使用數據實例化

回答

相關問題