Надеюсь, кто-нибудь может мне помочь, я пытаюсь обновить таблицу с помощью метода de "ajax .reload ()", позвольте мне объяснить, что я делаю, у меня есть вид, где я показываю форму с два ввода даты, которые позволяют мне выбрать начальную дату и конечную дату для фильтрации и событие типа os для отображения, а также соответствующую кнопку для проверки полей фильтра и вызова метода "Ajax .reload ()".
Вторая часть представления - это таблица, в которой отображаются события в соответствии со следующими условиями:
1.- При загрузке страницы (ввод начальной и конечной даты и тип события пуст) таблица должна показать события текущего месяца (с 1-го дня текущего месяца до последнего дня текущего месяца).
2.- Если я выберу начальную и конечную дату и тип события, и нажму кнопку формы, таблица должна отображать события в соответствии с условиями фильтра (передать сериализованную форму параметру данных ajax в конфигурации с датами).
Моя настоящая проблема в том, как мне настроить Ajax (с параметрами данных), чтобы получить желаемый результат и как вызвать метод "Ajax .reload ()".
Это код моего взгляда:
<form id="form-busca-custodias-facturar" method="get" action="{{route('buscacustodiasfacturar')}}" novalidate>
@if(Auth::user()->id_perfil == 1)
<input type="checkbox" name="is_admin" checked style="display:none">
@endif
{{ csrf_field() }}
<div class="row">
<div class="col">
<label for="">Buscar del:</label>
<div class="input-group date" id="" data-target-input="nearest">
<input type="text" name="f_inicio" class="form-control datepickerfilter" required/>
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
<div class="invalid-feedback">
Campo Requerido.
</div>
</div>
</div>
<div class="col">
<label for="">Buscar al:</label>
{{-- <input name="f_fin" type="date" class="form-control" placeholder="Fecha fin" required> --}}
<div class="input-group date" data-target-input="nearest">
<input type="text" name="f_fin" class="form-control datepickerfilter" required/>
<div class="input-group-append">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
<div class="invalid-feedback">
Campo Requerido.
</div>
</div>
</div>
<div class="col">
<label for="estatus">Tipo de Custodia</label>
<select name="tipo_custodia" class="form-control" required>
<option value="">Seleccionar</option>
<option value="*">Todo</option>
<option value="ARMADA">Armada</option>
<option value="BASICA">Básica</option>
<option value="GPS">GPS</option>
</select>
<div class="invalid-feedback">
Campo Requerido.
</div>
</div>
<div class="col">
<label for=""> </label><br>
<button class="btn btn-primary btn-block" id="btn-busca-custodias-facturar">Buscar</button>
</div>
</div>
</form>
И это es мой код js (первый метод - инициализация таблицы, а второй - кнопка cli c формы для фильтрации событий):
$('#table-facturacion-seguimientos-transporte').DataTable({
"language": {
"sProcessing": "Procesando...",
"sLengthMenu": "Mostrar _MENU_ registros",
"sZeroRecords": "No se encontraron resultados",
"sEmptyTable": "Ningún dato disponible en esta tabla",
"sInfo": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"sInfoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"sInfoFiltered": "(filtrado de un total de _MAX_ registros)",
"sInfoPostFix": "",
"sSearch": "Buscar:",
"sUrl": "",
"sInfoThousands": ",",
"sLoadingRecords": "Cargando...",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"oAria": {
"sSortAscending": ": Activar para ordenar la columna de manera ascendente",
"sSortDescending": ": Activar para ordenar la columna de manera descendente"
}
},
"processing": false,
"serverSide": true,
destroy: true,
deferLoading: 0,
createdRow: function (row, data, dataIndex) {
$(row).attr('data-all', JSON.stringify(data));
},
// data: response.seguimientos,
columns:[
{data: 'id_custodia', className: "text-center"},
{data: 'unidad_custodia', className: "text-center"},
{data: 'fecha_hora_servicio', className: "text-center"},
{data: 'nombre_cliente', className: "text-center"},
{data: 'no_unidad_custodiar', className: "text-center"},
// {data: 'nombre_motivo', className: "text-center"},
// {data: 'duracion_visita', className: "text-center"},
{data: 'nombre_estatus', className: "text-center"},
// {data: 'usuario_actualiza', className: "text-center"},
{
"data": null,
"defaultContent": '<button class="btn btn-primary btn-xs facturar" data-toggle="tooltip" title="Ver Detalle">Ver</button>',
className: 'text-center align-middle'
}
],
ajax: {
'url': $('#form-busca-custodias-facturar').attr('action'),
'type': $('#form-busca-custodias-facturar').attr('method'),
data: function(d){
d.form = $('#form-busca-custodias-facturar').serializeJSON()
}
// data: $('#form-busca-custodias-facturar').serializeJSON()
// 'data': {
// is_admin: "on",
// _token: "DOH4V72g6ac0iRdOEt2B86zkEd745J0oYlJTDFVH",
// f_inicio: "2020-04-01 00:00",
// f_fin: "2020-04-30 00:00",
// tipo_custodia: "*"
// },
},
});
$('#btn-guarda-facturacion-transporte').on('click', function(){
let form = document.getElementById('form-factura-custodia-transporte');
if(validarFormulario(form)){
console.log($(form).serialize());
processAlert.fire({
title: 'Procesando',
text: 'Guardando Información...',
type: 'info'
}).then(function () {
location.reload(true);
});
$.ajax({
type: $(form).attr('method'),
url: $(form).attr('action'),
data: $(form).serialize(),
dataType: "json",
success: function (response) {
console.log(response);
processAlert.update({
title: 'Ok!',
text: 'Datos de Facturacion Guardados.',
type: 'success'
});
processAlert.hideLoading();
},
error: function(xhr, textStatus){
console.log(xhr.responseText);
console.log(textStatus);
processAlert.update({
title: 'Error!',
text: 'Se presentó un error en la petición',
type: 'error',
timer: 1000,
// showCancelButton: true,
showConfirmButton: false,
showCancelButton: true,
});
processAlert.hideLoading();
}
});
}
else{
Swal.fire({
type: 'error',
title: 'Oops...',
text: 'Existen Campos Vacios',
})
}
});
Надеюсь, кто-нибудь может мне помочь, плиз ! : D