JQuery datatables Ajouter une nouvelle ligne

Je crée une page d'inscription où l'on peut enregistrer jusqu'à 20 autres personnes si elles le voulaient. J'ai donc ces zones de texte:JQuery datatables Ajouter une nouvelle ligne

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

C'est ma table html avec mon JQuery initialisation de 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 
});

Maintenant, je veux mettre un bouton ajouter de telle sorte que l'utilisateur peut entrer le premier et nom de famille, et email et appuyez sur ajouter, et il sera mis dans la table. Comment vais-je faire cela?

Source

2012-09-16 Richard

Une recherche google de votre question exacte. rapidement vous dire. 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 qui est exactement ce que Je l'ai fait avant de poster, et je ne pouvais ni queue ni tête des réponses. J'ai même essayé quelques solutions à aucun succès. ce qui est la raison pour laquelle je suis venu ici pour que quelqu'un pourrait expliquer une solution que je peux comprendre. Google est toujours mon premier option – Richard

http://datatables.net/examples/api/add_row.html ne contribue pas? Quelle partie de cela avez-vous des problèmes? –

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

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

}

vous devez appeler le addRow() dans le bouton clic.

Ajouter ce bouton dans votre code html

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

Source

2012-09-16 03:56:30 Sutha

ahh beaucoup mieux, je suis tout nouveau à jquery et datatables il est donc très difficile pour moi de faire ce genre de choses. Mais cela a beaucoup plus de sens. Donc, je peux faire la même chose pour modifier et supprimer. Une chose de plus, comment puis-je publier toutes ces données correctement afin que je puisse l'ajouter à une base de données mysql? Disons qu'ils s'inscrivent eux-mêmes et 20 autres personnes, j'ai besoin d'ajouter 21 entrées à ma base de données mysql. – Richard

pour vous inscrire, vous pouvez utiliser la ajax jQuery pour insérer les données dans la base de données. – Sutha

Voici la façon dont cela est fait maintenant dans 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(); 
});

Source

2014-05-05 15:43:28 Shoe

Cela peut aussi être utile mais pas toujours à la fois. J'ai débuggé moi-même et ne prendra pas beaucoup de temps même si vous avez plus de données.

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

Note: Si vous n'utilisez pas la colonne fixe, vous pouvez supprimer cette ligne $ (yourfirstcolumn) .insertAfter (tableClone.children [ "1"]

Source

2017-05-24 10:05:04 Eliotjse

JQuery datatables Ajouter une nouvelle ligne

Répondre

Questions connexes