JQuery Datatables Agregar nueva fila

Estoy creando una página de registro donde alguien puede registrar hasta 20 personas más si así lo desean. Así que tengo estos cuadros de texto:JQuery Datatables Agregar nueva fila

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

Ésta es mi tabla HTML con mi intialization jQuery de tablas de datos:

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

Ahora quiero poner un botón de agregar para que el usuario puede introducir la primera y apellido, correo electrónico y hit add, y se pondrá en la mesa. ¿Cómo voy a hacer esto?

Fuente

2012-09-16 Richard

Una búsqueda en Google de su pregunta exacta. rápidamente te digo. 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 eso es exactamente Lo hice antes de publicar, y no pude entender ni responder. Incluso probé algunas soluciones sin éxito. Por eso vine aquí para que alguien pudiera explicarme una solución que yo pueda entender. Google siempre es mi primera Opción – Richard

http://datatables.net/examples/api/add_row.html no ayuda? ¿Con qué parte estás teniendo problemas? –

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

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

}

necesita llamar al addrow() en el botón de hacer clic.

Añadir este botón en el código html

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

Fuente

2012-09-16 03:56:30 Sutha

ahh mucho mejor, soy nuevo en jquery y datatables así que es muy difícil para mí hacer este tipo de cosas. Pero esto tiene mucho mejor sentido. Entonces puedo hacer lo mismo para editar y eliminar. Una cosa más, ¿cómo publico todos estos datos correctamente para poder agregarlos a una base de datos MySQL? Digamos que ellos mismos se registran y otras 20 personas, necesito agregar 21 entradas a mi base de datos mysql. – Richard

para registrarse, puede usar jQuery ajax para insertar los datos en la base de datos. – Sutha

Esta es la forma en que esto se hace ahora en 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(); 
});

Fuente

2014-05-05 15:43:28 Shoe

Esto también puede ser útil, pero no siempre, a veces. Lo he depurado yo mismo y no tomaré mucho tiempo, incluso si tienes más datos.

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

Nota: Si no está utilizando la columna fija a continuación, puede eliminar esta línea de $ (yourfirstcolumn) .insertAfter (tableClone.children [ "1"]

Fuente

2017-05-24 10:05:04 Eliotjse

JQuery Datatables Agregar nueva fila

Respuesta

Cuestiones relacionadas