Skip to main content
se añadieron 730 caracteres en el cuerpo
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50
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>
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();
            });
        }
    });
});
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>
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();
            });
        }
    });
});
Origen Enlace
ffflabs
  • 23k
  • 28
  • 50

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>