0

Necesito recibir como parámetro en jQuery un atributo table dado a una etiqueta <button> como se muestra en la siguiente línea de código:

<button type="button" class="btn  ml-2 addCrow" name="bt-addCrow" id="addCrow" table="<%=app%>">Agregar
        </button> 

La vista de mi página está recibiendo del modelo una variable llamada <%=app%>. Mi idea es recibir el nombre de esta variable, que añadirá una nueva fila en el datatable con al recibir el clic del <button> "agregar".

Aquí estoy implementando el código del datatable que a partir de ese script:

$(document).ready(function (){
    let viewConfigurationApp_ = new configurationC();
    viewConfigurationApp_.addCrow();
});

export default class configurationC{
   
    addCrow(){
        let $this = this;
        let r = $('.addCrow').attr("table");
        console.log(r);
        var t = $(r).DataTable();
        var counter = 1;
       
        $('.addCrow').on('click', function(){ 
            t.row.add( [
                counter +'.1',
                counter +'.2',
                counter +'.3',
                counter +'.4',
                counter +'.5'
            ] ).draw();
     
            counter++;
        })
        $('.addCrow').click();
    }
}
   

Es mi primera vez juego con datatables... puede que sea obvia la respuesta a simple vista pero no la tengo.. jaja

1 respuesta 1

1

Sinceramente yo no manejo Node.js, pero te comparto 3 diferentes maneras de poder agregar registros/filas adicionales a un jQuery DataTable, esperando que te ayuden a solucionar tu duda:

$(document).ready( function () {

var data = [
    {
    "Program": "Program 1",
    "Deliverable": "Monthly Status Report (MSR)",
    "To": "[email protected]",
    "Date": "03/30/2002",
    "Approved": "Yes",
    "Notes": "Example Notes"
        },
    {
    "Program": "Program 1",
    "Deliverable": "Meeting Minutes",
    "To": "[email protected]",
    "Date": "03/30/2012",
    "Approved": "No",
    "Notes": "Example Notes"
        },
    {
    "Program": "Program 2",
    "Deliverable": "Monthly Status Report (MSR)",
    "To": "[email protected]",
    "Date": "03/30/2002",
    "Approved": "Yes",
    "Notes": "Example Notes"
        },
    {
    "Program": "Program 3",
    "Deliverable": "Monthly Status Report (MSR)",
    "To": "[email protected]",
    "Date": "03/30/2002",
    "Approved": "Yes",
    "Notes": "Example Notes"
        }
];

var newData = [
   {
      "Program": "Program 4",
      "Deliverable": "Monthly Status Report (MSR)",
      "To": "[email protected]",
      "Date": "04/30/2002",
      "Approved": "No",
      "Notes": "Example Notes 2"
   }
];

var table = $('#example').DataTable({
    data: data,
    columns: [
      {data:'Program', title: 'Program'},
      {data:'Deliverable', title: 'Deliverable'},
      {data:'To', title: 'To'},
      {data:'Date', title: 'Date'},
      {data:'Approved', title: 'Approved'},
      {data:'Notes', title: 'Notes'},
    ]
  });
  
   $("#btnAddHTML").click(function() {
  
       var nData = newData[0];
  
       var jRow = $("<tr>").append("<td>" + nData.Program + "</td><td>" + nData.Deliverable + "</td><td>" + nData.To + "</td><td>" + nData.Date + "</td><td>" + nData.Approved + "</td><td>" + nData.Notes + "</td>").append("</tr>");
       table.row.add(jRow).draw();
   });
   
   $("#btnAddObject").click(function() {
  
       table.row.add(newData[0]).draw();
   });
   
   $("#btnAddData").click(function() {
  
       table.row.add({
         "Program": "Program 4",
         "Deliverable": "Monthly Status Report (MSR)",
         "To": "[email protected]",
         "Date": "04/30/2002",
         "Approved": "No",
         "Notes": "Example Notes 2"
      }).draw();
   });
});
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

<table id="example" class="display nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Program</th>
      <th>Deliverable</th>
      <th>To</th>
      <th>Date Submitted</th>
      <th>Approved</th>
      <th>Notes</th>
    </tr>
  </thead>
</table>
<br>
<button id="btnAddHTML" >ADD ROWS (HTML)</button>
<br><br>
<button id="btnAddObject" >ADD ROWS (Object)</button>
<br><br>
<button id="btnAddData" >ADD ROWS (Data)</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.