jquery - example - Cómo cargar datos de DataTables al hacer clic en el botón

jquery table example

Question

Estoy usando este código de dataTable para cargar una tabla de datos.

var table = $(''#fileInfoTable'').DataTable({
   "sAjaxSource": "api/file/loadAll",
   "sAjaxDataProp": "",
   "order": [[0, "asc"]],
   "aoColumns": [{
      "mData": "fileId"
   }, {
      "mData": "fileName"
   }, {
      "mData": "sentDate"
   }, {
      "mData": "direction"
   }, {
      "mData": "interfaceType"
   }, {
      "mData": "buisnessLine"
   }, {
      "mData": "vaultName"
   }, {
      "mData": "manageCompony"
   }, {
      "mData": "lastActivity"
   }, {
      "mData": "lastActivityStatus"
   }, {
      "mData": "feedbackName"
   }, {
      "mData": "feedbackDate"
   }, {
      "mData": "processDate"
   }, {
      "mData": "eventsAmount"
   }, {
      "mData": "goodEventsAmount"
   }, {
      "mData": "sourceId"
   }]
});

Funciona bien si lo cargo en la carga de la página pero necesito poder cargar los datos haciendo clic en un botón y no en la carga de la página. Cómo puedo hacerlo ?

Editar: ahora estoy usando este código a continuación y puedo ver la alerta pero la tabla no está definida Editar: ahora estoy usando este código a continuación y puedo ver la alerta pero la tabla no está definida

Editar: ahora estoy usando este código a continuación y puedo ver la alerta pero la tabla no está definida

$(document).ready(function() {
             var table = $(''#fileInfoTable'').DataTable({
                    data : [],
                    "order" : [ [ 0, "asc" ] ],
                    "aoColumns" : [ {
                           "mData" : "fileId"
                    }, {
                           "mData" : "fileName"
                    }, {
                           "mData" : "sentDate"
                    }, {
                           "mData" : "direction"
                    }, {
                           "mData" : "interfaceType"
                    }, {
                           "mData" : "buisnessLine"
                    }, {
                           "mData" : "vaultName"
                    }, {
                           "mData" : "manageCompony"
                    }, {
                           "mData" : "lastActivity"
                    }, {
                           "mData" : "lastActivityStatus"
                    }, {
                           "mData" : "feedbackName"
                    }, {
                           "mData" : "feedbackDate"
                    }, {
                           "mData" : "processDate"
                    }, {
                           "mData" : "eventsAmount"
                    }, {
                           "mData" : "goodEventsAmount"
                    }, {
                          "mData" : "sourceId"
                    } ]
             })

             $("#loadData").on(''click'', function() {
                    alert("ppp:" + table.name);
                    table.ajax.url("api/file/loadAll").load();
             })
       });

Answer 1

Mira el código a continuación.

Agregar fila API

Agregar nuevos datos a una tabla es fundamental para el concepto de poder controlar dinámicamente el contenido de una DataTable, y este método proporciona la capacidad de hacer exactamente eso. Se agregará una sola fila a la vez: para agregar varias filas, llame a este método varias veces o utilice la contraparte plural de este método.

var table = $(''#example'').DataTable();

table.row.add( {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    } ).draw();

Borrar API

Cuando realiza una acción como agregar o eliminar una fila, cambiar las características de clasificación, filtrado o paginación de la tabla, querrá que DataTables actualice la pantalla para reflejar estos cambios. Esta función se proporciona para ese propósito.

var table = $(''#example'').DataTable();

table
    .clear()
    .draw();

ver documentación SORTEO

$(document).ready(function() {
  var table = $(''#example'').DataTable();

  $("#add").on(''click'', function() {
    table.row.add([
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "54",
      "2011/04/25",
      "$3,120",
    ]).draw();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />

<input type="button" name="add" id="add" value="addrow" />

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>

  </tbody>
</table>