Ulises Vargas De Sousa Ulises Vargas De Sousa - 1 year ago 291
Javascript Question

How re-render angular Datatable with different JSON data

I've already a Datatable controller as follow:

//Module / Módulo
var angularDataTables = angular.module("angularDataTables", ['datatables', 'datatables.buttons' , 'datatables.bootstrap']);

//Controller / Controlador
angularDataTables.controller("DTController", DTController);

//Function to build DataTables / Función para construir DataTables
function DTController(DTOptionsBuilder, DTColumnBuilder){

var vm = this;
vm.dtOptions = DTOptionsBuilder.fromSource('./model/conexion_basededatos_json.php')
"sEmptyTable": "No hay datos para cargar en la tabla",
"sInfo": "Mostrando _START_ de _END_ de _TOTAL_ entradas",
"sInfoEmpty": "Mostrando 0 de 0 de 0 entradas",
"sInfoFiltered": "(filtradas _MAX_ entradas totales)",
"sInfoPostFix": "",
"sInfoThousands": ",",
"sLengthMenu": "Mostrar _MENU_ entradas",
"sLoadingRecords": "Cargando...",
"sProcessing": "Procesando...",
"sSearch": "Buscar:",
"sZeroRecords": "No se encontraron registros",
"oPaginate": {
"sFirst": "Primera",
"sLast": "Última",
"sNext": "Siguiente",
"sPrevious": "Anterior"
"oAria": {
"sSortAscending": ": activar para ordenar de forma ascendente",
"sSortDescending": ": activar para ordenar de forma descendente"
"buttons": {
print: 'Imprimir',
vm.dtColumns = [
DTColumnBuilder.newColumn('empleados').withTitle('EMPLEADOS A CARGO'),
DTColumnBuilder.newColumn('tiempo').withTitle('AÑOS EN LA EMPRESA')


Loads succefully the data from JSON. My question is: How I could re-render another 6 JSON's data in the same Datatable?

This plunker can reload datatable, but uses the same JSON data.

How I could reload datatatable with different JSON data?

Answer Source

use reloadData method of datatable

function reloadData() {
    var resetPaging = false;
    vm.dtInstance.reloadData(callback, resetPaging);

function callback(json) {

see here for more info angular datatable