2012-09-16 13 views
6

Tworzę stronę rejestracji, na której można zarejestrować do 20 innych osób, jeśli chcą. Więc mam tych pól tekstowych:JQuery Datatables Dodaj nowy wiersz

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

To jest moja tabela html z moim JQuery intialization z 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 
}); 

teraz chcę umieścić przycisk dodawania, dzięki czemu użytkownik może wprowadzić pierwszą i nazwisko, e-mail i hit dodaj, a zostanie on umieszczony w tabeli. Jak mam to zrobić?

+0

wyszukiwarki Google z dokładną pytanie będzie. szybko Ci to powiedz. https://www.google.com/search?q=JQuery+Datatables+Dodaj+new+Row&rlz=1C1CHFX_enUS480US480&aq=f&sugexp=chrome,mod=8&sourceid=chrome&ie=UTF-8 –

+1

@StephenSarcsamKamenar yah to jest dokładnie to, Zrobiłem to przed wysłaniem i nie mogłem wysłuchać odpowiedzi, a nawet wypróbowałem kilka rozwiązań bez powodzenia, dlatego przyszedłem tutaj, aby ktoś mógł wyjaśnić rozwiązanie, które mogę zrozumieć. Google jest zawsze moim pierwszym opcja – Richard

+0

http://datatables.net/examples/api/add_row.html nie pomaga? Z jaką częścią tego masz problemy? –

Odpowiedz

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

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

} 

musisz wywołać addrow() w kliknięciu przycisku.

Dodaj ten przycisk w kodzie html

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

o wiele lepiej, jestem nowy na jquery i datatables, więc bardzo trudno jest mi robić takie rzeczy. Ale ma to dużo lepszy sens. Mogę zrobić to samo dla edycji i usunięcia. Jeszcze jedno, jak poprawnie umieścić wszystkie te dane, aby móc dodać je do bazy danych mysql? Powiedzmy, że rejestrują się i 20 innych osób, muszę dodać 21 wpisów do mojej bazy danych mysql. – Richard

+0

do rejestracji, można użyć jQuery ajax do wstawienia danych do bazy danych. – Sutha

5

Oto sposób dzieje się to w 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(); 
}); 
0

Może to być również pomocne, ale nie zawsze na czas. Sam to debugowałem i nie zajmie to dużo czasu, nawet jeśli masz więcej danych.

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

Uwaga: Jeśli nie używasz stałą kolumnę następnie można usunąć tę linię $ (yourfirstcolumn) .insertAfter (tableClone.children [ "1"]

Powiązane problemy