Skip to content

Instantly share code, notes, and snippets.

@donpandix
Last active May 12, 2021 22:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donpandix/84a747753ec3b4f687f78a49d139562d to your computer and use it in GitHub Desktop.
Save donpandix/84a747753ec3b4f687f78a49d139562d to your computer and use it in GitHub Desktop.
[DataTables.js ejemplo de uso y carga de datos] Genera una tabla con carga de datos ASYNC con datatables.js #javascript
$(document).ready(function(){
/**
* Setea e inicializa la tabla con datos
*/
$("#tbl_ajax").DataTable({
"ajax" : URL_SERVICIO,
"columns" : [
{"data" : "col1" },
{"data" : "col2"},
{"data" : "col3"},
{"data" : null, render: function(data, type, row, meta){
return '<a href="'+row.col4+'" target="_blank">Accion</a>';
}}
]
});
});
/**
* Esta función recarga la
* data de la tabla y se gatilla con
* un botón
*/
function filtrar () {
$("#tbl_ajax").DataTable().ajax.url( URL_SERVICIO ).load(false, false);
}
/**
* Recarga la información desde un
* dataset predefinido
*/
function ejemplo_recargar_datos () {
$("#tbl_ajax").DataTable().clear();
$("#tbl_ajax").DataTable().rows.add(data_inyectar);
$("#tbl_ajax").DataTable().draw();
}
<table class="table table-hover table-bordered " width="100%" id="tbl_ajax">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
</tr>
</thead>
</table>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment