2014-11-26 4 views
1

Вот образец html, который я создал для моего требования. В основном я хочу добавить новую строку в существующую datatable, где источником для datatable является таблица html dom. И добавляя новую строку, мне нужно сначала добавить ее в таблицу dom, а datatable следует повторно инициализировать/вновь создать с помощью этой дополнительной строки.Как добавить новую строку как html в существующий datatable

<head> 

<link type="text/css" rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script> 

</head> 

<body> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 

     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 

     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td> 
       <td>2011/07/25</td> 
       <td>$170,750</td> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>Junior Technical Author</td> 
       <td>San Francisco</td> 
       <td>66</td> 
       <td>2009/01/12</td> 
       <td>$86,000</td> 
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>Senior Javascript Developer</td> 
       <td>Edinburgh</td> 
       <td>22</td> 
       <td>2012/03/29</td> 
       <td>$433,060</td> 
      </tr> 
     </tbody> 
    </table> 


</body> 


<script> 

$(document).ready(function() { 

    var dt = $('#example').dataTable(); 


    $('#example tbody').append('<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>'); 

    dt.destroy(); 

    $('#example').dataTable(); 

}); 
</script> 
+0

Там есть еще один поток, который говорит об этом. http://stackoverflow.com/questions/171027/add-table-row-in-jquery – Casey

ответ

0

Вы не можете добавить строку, используя прямой HTML манипуляции тегов, как только таблица инстанциирован, используйте метод from the documentation:

var t = $('#example').DataTable(); 
var counter = 1; 

$('#addRow').on('click', function() { 
    t.row.add([ 
     counter +'.1', 
     counter +'.2', 
     counter +'.3', 
     counter +'.4', 
     counter +'.5' 
    ]).draw(); 

    counter++; 
}); 

// Automatically add a first row of data 
$('#addRow').click(); 
+3

Я изначально пробовал это, но мое требование другое. Я хочу добавить элементы hmtl (т. Е. что-то) в td не статические данные. –

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