Estoy utilizando el plugin DataTable
de jQuery
. Sé que la forma normal de llenar un DataTable
es la siguiente:
function listarProformas(){
var datos = {
"dni" : $('#txt_dni').val(),
"cargo" : $('#txt_cargo').val()
}
$('#tablaPersonal').DataTable({
destroy : true,
ajax: {
url: "controlador",
method: "POST",
data: datos,
dataSrc: "datos"
},
columns: [
{data: "nroProforma"},
{data: "dni"},
{data: "nombres"},
{data: "apellidos"},
{data: "concepto"},
{data: "email"},
{data: "direccion"}
]
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablaPersonal" class="table table-bordered" style="width: 100%;">
<thead class="table table-dark">
<tr>
<th>nroProforma</th>
<th>dni</th>
<th>Apel</th>
<th>apellidos</th>
<th>concepto</th>
<th>Dirección</th>
<th>Email</th>
<th>direccion</th>
</tr>
</thead>
</table>
En este caso, los datos se guardan automáticamente en las columnas, pero quisiera trabajar con los datos que obtengo como respuesta del AJAX
para agregar botones a las columnas, colocar un índice al inicio de la tabla, etc. Quiero saber si es posible llenar las columnas por JavaScript
, mas o menos de esta manera:
function listarProformas(){
var datos = {
"dni" : dni,
"cargo" : cargo
}
ajax: {
url: "controlador",
type: "POST",
datatype: "json"
success: function(data){
$("#tablaPersonal").Datatable();
var fila = '';
for(var i=0; data.lenght; i++){
fila += "<tr>"+
"<td>"+data['nroProforma']+"</td>"+
"<td>"+data['dni']+"</td>"+
"<td>"+data['concepto']+"</td>"+
"<td>"+data['Dirección']+"</td>"+
"<td>"+data['Email']+"</td>"+
"<td>"+data['direccion']+"</td>"+
"</tr>";
}
$("#tablaPersonal").append(fila);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="tablaPersonal" class="table table-bordered" style="width: 100%;">
<thead class="table table-dark">
<tr>
<th>nroProforma</th>
<th>dni</th>
<th>apellidos</th>
<th>concepto</th>
<th>Dirección</th>
<th>Email</th>
<th>direccion</th>
</tr>
</thead>
</table>
Porque me resulta más fácil manipular el contenido de las filas que inserto. Intenté algo similar a esto último, pero la DataTable
se crea por separado y no puedo utilizar sus propiedades como "búsqueda" y "ordenamiento".