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>