JQuery Datatables नई पंक्ति जोड़ें

Question

मैं एक पंजीकरण पृष्ठ बना रहा हूं जहां कोई चाहें तो 20 अन्य लोगों को पंजीकरण कर सकता है।

<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 
}); 

अब मैं एक ऐड बटन लगाना चाहते हैं तो उपयोगकर्ता इनपुट पहले कर सकते हैं कि और:

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/> 

यह DataTables की मेरी JQuery intialization के साथ अपने HTML तालिका है: तो मैं इन पाठ बॉक्स है अंतिम नाम, और ईमेल और हिट जोड़ें, और इसे तालिका में रखा जाएगा। मैं यह कार्य कैसे करूं?

Answer 1

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

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

} 

आप addrow() बटन क्लिक में कॉल करने के लिए की जरूरत है।

अपने html कोड

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

Answer 2

यहाँ जिस तरह से यह अब 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

में किया यह भी सहायक हो सकता है कर रहा है लेकिन हमेशा नहीं समय पर है में इस बटन जोड़ें। मैंने इसे स्वयं डीबग किया है और यदि आपके पास अधिक डेटा है तो भी अधिक समय नहीं लगेगा।

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

नोट: यदि आप निश्चित स्तंभ का उपयोग नहीं कर रहे हैं, तो आप इस लाइन को हटा सकते हैं $ (yourfirstcolumn) .insertAfter (tableClone.children [ "1"]