JQuery Datatables Thêm hàng mới

Question

Tôi đang tạo trang đăng ký nơi ai đó có thể đăng ký tối đa 20 người khác nếu họ muốn. Vì vậy, tôi có những hộp văn bản:

First Name: <br/><input type="text" name="fname" id="fname" /> <br/> 
Last Name: <br/><input type="text" name="lname" id="lname" /> <br/> 
Email: <br/><input type="text" name="email" id="email"/> <br/> 

Đây là bảng html của tôi với intialization JQuery của tôi về DataTables:

<div id="tables"> 
    <table id="table" border="1"> 
     <thead> 
      <tr> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email</th> 
      </tr> 
     </thead> 
    </table> 
</div> 

$('#reg_more').dataTable({ 
    "bLengthChange": false, 
    "bInfo": false 
}); 

Bây giờ tôi muốn đặt một nút add để người dùng có thể nhập đầu tiên và họ, và email và nhấn thêm, và nó sẽ được đưa vào bảng. Làm thế nào để tôi làm việc này?

Answer 1

$(document).ready(function() { 
    $('#example').dataTable(); 
    $('#addbtn').click(addrow); 
}); 

function addrow() { 
    $('#example').dataTable().fnAddData([ 
     $('#fname').val(), 
     $('#lname').val(), 
     $('#email').val() ]); 

} 

bạn cần gọi hàm addrow() trong lần nhấp nút.

Thêm nút này trong mã html của bạn

<input type="button" value="add" id="addbtn" /> 

Answer 2

Dưới đây là cách này ngay bây giờ được thực hiện trong DataTables 1,10

<input type="button" value="add" id="addbtn" /> 

var dTable = $('#example').DataTable(); 
$('#addbtn').on('click', function() { 
    dTable.row.add([ 
     $('#fname').val(), 
     $('#lname').val(), 
     $('#email').val() 
    ]).draw(); 
}); 

Answer 3

này cũng có thể hữu ích nhưng không phải lúc nào vào những thời điểm. Tôi đã tự mình gỡ lỗi và sẽ không mất nhiều thời gian ngay cả khi bạn có nhiều dữ liệu hơn.

var table = $(".tableclassName")["1"] 
var tableClone = $(".tableclassName")["3"] 
$(yournewrowtext).insertAfter(table.children["1"].children[currentRowId]); 
$(yourfirstcolumn).insertAfter(tableClone.children["1"]. 
children[currentRowId]); 

Lưu ý: Nếu bạn không sử dụng cột cố định sau đó bạn có thể xóa dòng này $ (yourfirstcolumn) .insertAfter (tableClone.children [ "1"]