如何结合Daterangepicker的daterange-btn和Datatable以显示与Daterangepicker的参数匹配的结果？

Question

如标题所示，我试图在页面首次加载时在数据表中显示来自MYSQL表的所有信息。 但是，一旦页面加载完毕，用户就有机会使用“ daterangepicker”插件设置日期范围。 如果选择了日期范围，我想传递在$ _GET变量中选择的日期范围。 我已经研究了这个主题，但是关于它的信息似乎很少。 这里的最大问题是，我不知道如何/在何处显示与所选日期范围匹配的结果。 我的想法是在设置$ .ajax的地方，带出信息。 请纠正我或给我任何反馈！ 我们将不胜感激。

$('#daterange-btn').daterangepicker(

 {
  ranges   : {
    'Hoy'       : [moment(), moment()],
    'Últimos 7 días' : [moment().subtract(6, 'days'), moment()],
    'Últimos 30 días': [moment().subtract(29, 'days'), moment()],
    'Este mes'  : [moment().startOf('month'), moment().endOf('month')]
  },
  startDate: moment(),
  endDate  : moment()
 },
  function (start, end) {

  $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
   var fechaInicial = start.format('YYYY-MM-DD');
   $(".fechaInicial").val(fechaInicial);
   $(".fechaFinal").val(fechaFinal);
   var fechaFinal = end.format('YYYY-MM-DD');
   var capturarRango = $("#daterange-btn span").html();
   localStorage.setItem("capturarRango", capturarRango);

   $.ajax({
    url:"ajax/datatable-adminventas.ajax.php",
    type:"get",
    data:{fechaInicial: fechaInicial, fechaFinal: fechaFinal},
    success:function(respuesta){
      console.log(respuesta);
      $('.tablaAdminVentas').DataTable({
          "ajax": "ajax/datatable-adminventas.ajax.php",
          "deferRender": true,
          "retrieve": true,
          "processing": true,
          "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_",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0",
            "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"
            }
        }
      });
    }
  });
 }
)

Answer 1

您不需要像上面一样调用两次相同的API。

这是你可以做的

日期选择器更改事件。 这只是为了使事件功能更清晰。

您可以使用function (start, end) {函数（如果有效）

$('#daterange').daterangepicker();

// Triggered when the picker is hidden on date selection
$('#daterange').on('hide.daterangepicker', function(ev, picker) {
    var fechaInicial = picker.startDate.format('YYYY-MM-DD');
        var fechaFinal = picker.endDate.format('YYYY-MM-DD');
    refreshGrid(fechaInicial, fechaFinal);
});

此处有更多daterangepicker事件

Datatable加载逻辑代码，我们在其中传递选定的日期。

我假设您所添加的数据表代码正在正确加载表。

请参阅ajax part of the code的ajax part of the code

function refreshGrid(start, end){

    $('.tablaAdminVentas').DataTable({
      "ajax": {
        "url": "ajax/datatable-adminventas.ajax.php",
        "type": "GET",
        "data": {fechaInicial: start, fechaFinal: end},
      },
      "deferRender": true,
          "retrieve": true,
          "processing": true,
          "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_",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0",
            "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"
            }
        }
      });
}