Refresh DataTables Error

Question

Refresh DataTables Error

Navigation

#1 by (0 votes)

0

After doing a new registration, I want my table to be updated, for which I am using

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

However this throws me the following error

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

I am trying to update it in the following way:

$("#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();

   }
});
});

The table is shown as follows

$.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

});
});

I also tried using

var table = $('#example').DataTable( {
    ajax: "data.json"
} );

javascript php datatables

asked by CristianOx21 28.12.2017 в 17:53

source

1 answer

Problem when loading javascript from mailchimp in wordpress The specified cast from a materialized "System.Int32" type to the "System.String" type is not valid

score 0 · Answer 1

Your DataTable does not have an Ajax origin, but is being initialized from the DOM. (You draw a common table and then DataTables embellishes it). Then the call to .ajax.reload() tries to refresh a data source that does not exist.

I would put as a data source the petition that you are doing today with $.post(baseurl+"C_Pagos_Tipos/getPagos" but that would add complexity to the initial configuration of the table. An intermediate solution that does not force you to change the way you're working the data, would be to draw the table dynamically using the data option and then cleaning and adding data when you want to refresh.

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>';
        } 
      }
    ]
});

Then, when you want to refresh your data, you call back the origin (the one you call by POST) and put

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>

In your use case, this would be:

$("#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();
            });
        }
    });
});