JQuery Datatables Neue Zeile hinzufügen

Ich erstelle eine Registrierungsseite, auf der jemand bis zu 20 andere Personen registrieren kann, wenn er das möchte. Also ich habe diese Textfelder:JQuery Datatables Neue Zeile hinzufügen

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

Das ist mein HTML-Tabelle mit meiner JQuery intialization von Tables:

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

Jetzt möchte ich ein Add-Taste setzen, so dass der Benutzer kann die erste und Nachname, und E-Mail und Hit hinzufügen, und es wird in die Tabelle gelegt. Wie gehe ich dabei vor?

Quelle

2012-09-16 Richard

Eine Google-Suche Ihre genaue Frage wird. schnell sagen Sie mir https://www.google.com/search?q=JQuery+Datatables+Add+new+Row&rlz=1C1CHFX_enUS480US480&aq=f&sugexp=chrome,mod=8&sourceid=chrome&ie=UTF-8 –

@StephenSarcsamKamenar yah, das ist genau was Ich habe es vor der Veröffentlichung getan, und ich konnte mir die Antworten nicht erklären. Ich habe sogar einige Lösungen ausprobiert, die keinen Erfolg hatten. Deshalb kam ich hierher, damit jemand eine Lösung erklären konnte, die ich verstehen kann. Google ist immer meine erste Option – Richard

http://datatables.net/examples/api/add_row.html hilft nicht? Mit welchem Teil davon hast du Probleme? –

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

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

}

müssen Sie die addrow() in der Schaltfläche klicken klicken.

diese Schaltfläche in Ihrem HTML-Code hinzufügen

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

Quelle

2012-09-16 03:56:30 Sutha

ahh viel besser, ich bin brandneu zu Jquery und Datatables, so dass es sehr schwer für mich ist, diese Art von Sachen zu tun. Aber das macht viel mehr Sinn. Also kann ich das gleiche zum Bearbeiten und Entfernen machen. 1 mehr Sache, wie poste ich alle diese Daten richtig, also kann ich es einer mysql Datenbank hinzufügen? Nehmen wir an, sie registrieren sich selbst und 20 andere Personen, ich muss 21 Einträge zu meiner MySQL-Datenbank hinzufügen. – Richard

zu registrieren, können Sie die jQuery Ajax verwenden, um die Daten in die Datenbank einzufügen. – Sutha

Hier ist der Weg, dies jetzt in Tables 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(); 
});

Quelle

2014-05-05 15:43:28 Shoe

Dies auch getan, aber nicht immer manchmal hilfreich sein kann. Ich habe das selbst getestet und werde nicht viel Zeit brauchen, selbst wenn Sie mehr Daten haben.

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

Hinweis: Wenn Sie nicht fest Spalte sind, dann können Sie diese Zeile $ entfernen (yourfirstcolumn) .insertAfter (tableClone.children [ "1"]

Quelle

2017-05-24 10:05:04 Eliotjse

JQuery Datatables Neue Zeile hinzufügen

Antwort

Verwandte Themen