Как объединить daterange-btn Daterangepicker и Datatable, чтобы показать результаты, которые соответствуют параметрам Daterangepicker? - PullRequest
Новая
       12

Как объединить daterange-btn Daterangepicker и Datatable, чтобы показать результаты, которые соответствуют параметрам Daterangepicker?

0 голосов
/ 28 ноября 2018

Как видно из заголовка, я пытаюсь при первой загрузке страницы показать всю информацию из таблицы 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"
            }
        }
      });
    }
  });
 }
)

1 Ответ

0 голосов
/ 28 ноября 2018

Вам не нужно вызывать один и тот же API дважды, как вы делаете выше.

Вот как вы можете сделать

событие изменения Datepicker.Это просто, чтобы сделать функцию события понятной.

Вы можете использовать вашу функцию 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

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