Javascript 使用表单重新加载DataTable Ajax

希望有人能帮助我，我正在尝试用de方法“ajax.reload（）”更新一个表，让我解释一下我在做什么，我有一个视图，其中我显示了一个带有两个日期输入的表单，让我选择要筛选的初始日期和最终日期，以及要显示的类型os事件，以及相应的按钮来验证筛选字段和调用“Ajax.reload（）”方法

视图的第二部分是表格，其中根据以下条件显示事件：

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="">&nbsp;</label><br>
              <button class="btn btn-primary btn-block" id="btn-busca-custodias-facturar">Buscar</button>
            </div>
          </div>
        </form>

@如果（Auth:：user（）->id\u perfil==1）
@恩迪夫
{{csrf_field（）}}
巴士线：
坎波·雷凯里多。
巴士公司：
{{--  --}}
坎波·雷凯里多。
提波德库斯托迪亚酒店
选择的
待办事项
舰队
巴斯卡
全球定位系统
坎波·雷凯里多。


客车

这是我的js代码（第一种方法是表初始化，第二种方法是表单的clic按钮来过滤事件）：

$（'#表facturacion seguimientos transport'）。数据表({
“语言”：{
“sProcessing”：“Procesando…”，
“长度菜单”：“Mostrar菜单”，
“sZeroRecords”：“无任何结果”，
“sEmptyTable”：“Ningún dato可争议的资产”，
“sInfo”：“开始和结束登记总登记”，
“sInfoEmpty”：“注册总数为0的Mostrando registros del 0 al 0 de un total de 0 registros”，
“sInfoFiltered”：（最大登记总数的过滤器）”，
“sInfoPostFix”：“，
“搜索”：“客车：”，
“sUrl”：“，
“信佛千”：“，”，
“sLoadingRecords”：“Cargando…”，
“oPaginate”：{
“sFirst”：“Primero”，
“sLast”：“Último”，
“sNext”：“Siguiente”，
“前”：“前”
},
“奥里亚”：{
“升迁之旅”：“升迁之旅”活动，
“教师指导”：“下一代教师专栏”活动
}
}, 
“处理”：假，
“服务器端”：正确，
摧毁：没错，
正在加载：0，
createdRow：函数（行、数据、数据索引）{
$（row.attr（'data-all'，JSON.stringify（data））；
},
//数据：response.seguimientos，
栏目：[
{数据：'id_custodia'，类名：'text center'}，
{数据：'unidad_custodia'，类名：“文本中心”}，
{数据：'fecha_hora_servicio'，类名：“文本中心”}，
{数据：'nombre_cliente'，类名：“文本中心”}，
{数据：'no_unidad_custodiar'，类名：“text center”}，
//{数据：'nombre_motivo'，类名：“文本中心”}，
//{数据：'duracion_visita'，类名：“文本中心”}，
{数据：'nombre_estatus'，类名：“文本中心”}，
//{数据：'usuario_Realiza'，类名：“文本中心”}，
{
“数据”：空，
“defaultContent”：“版本”，
类名：“文本中心对齐中间”
}
],
阿贾克斯：{
'url'：$（'形式为busca custodias facturar'）.attr（'操作'），
'type'：$（'form busca custodias facturar'）.attr（'method'），
数据：功能（d）{
d、 form=$（'#form busca custodias facturar'）。serializeJSON（）
}
//数据：$（'form busca custodias facturar'）。序列化JSON（）
//“数据”：{
//是_admin:“on”，
//_标记：“DOH4V72g6ac0iRdOEt2B86zkEd745J0oYlJTDFVH”，
//伊尼西奥：“2020-04-01 00:00”，
//财政部：“2020-04-30 00:00”，
//tipo_保管处：“*”
// },
},
}); 
$（'btn guarda facturacion transporte'）。在（'click'，function（）上{
let form=document.getElementById（'form-factura-custodia-transporte'）；
if（有效配方（表格））{
log（$（form.serialize（））；
火灾警报({
标题：“Procesando”，
文字：“Guardando Información…”，
键入：“信息”
}).then（函数（）{
位置。重新加载（true）；
});
$.ajax({
类型：$（form）.attr（'method'），
url:$（form.attr（'action'），
数据：$（表单）.serialize（），
数据类型：“json”，
成功：功能（响应）{
控制台日志（响应）；
processAlert.update({
标题：“好的！”，
文字：“Datos de Facturacion Guardados.”，
类型：“成功”
});
processAlert.hideLoading（）；
},
错误：函数（xhr，textStatus）{
console.log（xhr.responseText）；
console.log（textSt
$('#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',
        })
    }
});