如何结合日期范围选择器的日期范围-btn 和数据表以显示与日期范围选择器的参数匹配的结果？

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);
});

更多日期范围选择器事件点击这里

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

我假设您添加的有问题的Datatable代码正在正确加载表。

请参阅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"
}
}
});
}