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();
});
}
});
});
getPagos
tienes que llamarlo con un POST?