0

Luego de hacer un nuevo registro, quiero que se actualice mi tabla, para lo cual estoy utilizando

$('#id_tabla').DataTable().ajax.reload();

Sin embargo esto me arroja el siguiente error

DataTables warning: table id=tblPagos - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

Lo estoy intentando de actualizar de la siguiente forma:

$("#btn_ingresar").click(function(){

var id = $("#id").val();
var tipo_pago = $("#tipo_pago").val();

$.ajax({

 url: baseurl+"C_Pagos_Tipos/Insert_Pagos/",
 type: 'post',
 data: { "id": id, "tipo_pago": tipo_pago },

 success: function(response){

       $("#modal_nuevo").modal('hide');

       $("#modal_confirmar").modal('show');

       $('#tblPagos').DataTable().ajax.reload();

   }
});
});

La tabla se muestra de la siguiente forma

$.post(baseurl+"C_Pagos_Tipos/getPagos",
function(data){

var obj = JSON.parse(data);
$.each(obj, function(i, item){
$("#tblPagos").append(
  '<tr>'+
  '<td >'+item.id+'</td>'+
  '<td>'+item.tipo_pago+'</td>'+
  '<td><a href="#" title="Editar" data-toggle="modal" data-target="#modalEditar" onClick="selPagos(\''+item.id+'\',\''+item.tipo_pago+'\');"><i style="color:#555;"  class="glyphicon glyphicon-edit" ></i> Editar</a></td>'+
  '</tr>'
 );
});
$("#tblPagos").DataTable({

'paging': true,
'info': true,
'filter': true

});
});

También probé utilizando

var table = $('#example').DataTable( {
    ajax: "data.json"
} );
4
  • ¿podrías poner la estructura de tu json?
    – El Micke
    Commented el 28 dic. 2017 a las 18:41
  • En el controlador public function getPagos(){ echo json_encode($this->M_Pagos_Tipos->getPagos()); } en el modelo del mismo nombre es una consulta sql Commented el 28 dic. 2017 a las 18:44
  • Aparte de eso no tengo un archivo JSON, la tabla la muestro usando el javascript Commented el 28 dic. 2017 a las 18:45
  • Y por qué getPagos tienes que llamarlo con un POST?
    – ffflabs
    Commented el 29 dic. 2017 a las 16:08

1 respuesta 1

0

Tu DataTable no tiene un origen Ajax, sino que se está inicializando desde el DOM. (dibujas una tabla común y luego DataTables la embellece). Luego el llamado a .ajax.reload() intenta refrescar un origen de datos que no existe.

Yo le pondría como origen de datos la petición que hoy estás haciendo con $.post(baseurl+"C_Pagos_Tipos/getPagos" pero eso añadiría complejidad a la configuración inicial de la tabla. Una solución intermedia que no te obliga a cambiar la manera como estás trabajando los datos, sería dibujar la tabla dinámicamente usando la opción data y luego limpiando y añadiendo datos cuando quieras refrescar.

var obj = JSON.parse(data);
$('#example').DataTable( {
    data:  obj,
    columns: [
      { 
        data: "id", 
        aTargets:[0] 
      },
      { 
        data: "tipo_pago", 
        aTargets:[1] 
      },
      { 
        data: "id", 
        aTargets:[2],
        render:function(item,type,row) {
            return '<a href="#" title="Editar" data-toggle="modal" data-target="#modalEditar" onClick="selPagos(\''+row.id+'\',\''+row.tipo_pago+'\');"> Editar</a></td>';
        } 
      }
    ]
});

Luego, cuando quieras refrescar tus datos, vuelves a llamar al origen (ese que llamas por POST) y pones

var newObj = JSON.parse(newdata);
$('#example').DataTable().clear();
$('#example').DataTable().rows.add(newObj).draw();

var  dataSet1 =    [
    {id:1, tipo_pago:'cash'},
    {id:2, tipo_pago:'cheque'},
    {id:3, tipo_pago:'transferencia'},
    {id:4, tipo_pago:'tarjeta de crédito'}
    ];

var dataSet2 =    [
    {id:5, tipo_pago:'efectivo'},
    {id:6, tipo_pago:'nota de crédito'},
    {id:7, tipo_pago:'gift card'},
    {id:8, tipo_pago:'bitcoins'}
    ];

 
$(document).ready(function() {


    $('#example').DataTable( {
    
        sDom: 'rtip',
        data:  dataSet1,
        columns: [
          { 
            data: "id", 
            aTargets:[0] 
          },
          { 
            data: "tipo_pago", 
            aTargets:[1] 
          },
          { 
            data: "id", 
            aTargets:[2],
            render:function(item,type,row) {
                return '<a href="#" title="Editar" data-toggle="modal" data-target="#modalEditar" onClick="selPagos(\''+row.id+'\',\''+row.tipo_pago+'\');"> Editar</a></td>';
            } 
          }
        ]
    });
});
  

$('#dataset1').on('click',function() {
    $('#example').DataTable().clear();
    $('#example').DataTable().rows.add(dataSet1).draw();
});


$('#dataset2').on('click',function() {
    $('#example').DataTable().clear();
    $('#example').DataTable().rows.add(dataSet2).draw();
});
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link data-require="datatables@*" data-semver="1.10.12" rel="stylesheet" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
    <script data-require="datatables@*" data-semver="1.10.12" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    
  </head>

  <body>
    
    <button id="dataset1">Usar Dataset 1</button>
    <button id="dataset2">Usar Dataset 2</button>
    
<table id="example" class="display" width="100%">
  <thead>
  <tr>
    <th>ID</th>
    <th>Tipo Pago</th>
    <th>Acciones</th>
  </tr>  
  </thead>
  <tbody>
  </tbody>
</table>

En tu caso de uso, esto quedaría:

$("#btn_ingresar").click(function () {

    var id = $("#id").val();
    var tipo_pago = $("#tipo_pago").val();

    $.ajax({
        url: baseurl + "C_Pagos_Tipos/Insert_Pagos/",
        type: 'post',
        data: {
            "id": id,
            "tipo_pago": tipo_pago
        },
        success: function (response) {

            $("#modal_nuevo").modal('hide');

            $("#modal_confirmar").modal('show');
            $.post(baseurl + "C_Pagos_Tipos/getPagos", function (newdata) {
                var newobj = JSON.parse(newdata);
                $('#tblPagos').DataTable().clear();
                $('#tblPagos').DataTable().rows.add(newobj).draw();
            });
        }
    });
});

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.