Question

所以，我有一个包含三列的基本数据 - type，amount，added_at。

我想在服务器端处理的added_at列上应用日期范围过滤器。

我已查看以下帖子： How do I filter date range in DataTables?

还有：http://legacy.datatables.net/release-datatables/examples/plug-ins/range_filtering.html

但我无法将其与服务器端集成。我需要在javascript中进行哪些更改才能从服务器获取数据。我当前的设置已经从服务器获取数据。

$("#transactions").dataTable({
        "bServerSide" : true,
        "sAjaxSource" : transactionUrl,
        "bProcessing" : true,
        "sPaginationType" : "simple_numbers",
        "bJQueryUI" : true,
        "searching" : false,
        "ordering" : true,
        "info" : false,
        "aoColumns" : [{
          "mData" : "type"
        }, {
          "mData": "amount"
        }, {
          "mData" : "added_at",
          "render": function (data) {
            return getDate(data);
          }
        }],
        "aoColumnDefs": [{
          "defaultContent": "-",
          "targets": "_all"
        }]
      });
    });

我在评论中提出建议后试了这个。

将此添加到datatable -

"ajax": {
          "url": transactionUrl,
          "data": {
            "date_from": daterange_from,
            "date_to": daterange_to
          }
        }

daterange_from和daterange_to是全局变量，最初为空，在daterangepicker的回调函数中选择日期后设置。

从之前的代码中删除了sAjaxSource。

并添加了这个日期范围选择器

$('input[name="datepicker_range"]').daterangepicker(
              {
                locale: {
                  format: 'YYYY-MM-DD'
                },
                autoUpdateInput: true
              },
              function (start, end, label) {
                $("#datepicker_from").val(getDate(start));
                $("#datepicker_to").val(getDate(end));
                console.log($("#datepicker_from").val());
                console.log($("#datepicker_to").val());
                daterange_from = document.getElementById("datepicker_from").value;
                daterange_to = document.getElementById("datepicker_to").value;
                console.log(label);
                oTable.fnDestroy();
                oTable.fnDraw();
              });

现在的问题是我得到了

的价值

Answer 1

minDateFilter = "";
maxDateFilter = "";
$('#date_filter').on('apply.daterangepicker', function (ev, picker) {
      $(this).val(picker.startDate.format('DD-MM-YYYY') + ' - ' + picker.endDate.format('DD-MM-YYYY'));
      minDateFilter = new Date(picker.startDate.format('MM-DD-YYYY')).getTime();
      maxDateFilter = new Date(picker.endDate.format('MM-DD-YYYY')).getTime();
      console.log(minDateFilter);
      console.log(maxDateFilter);
  });

具有服务器端处理的数据表中的日期范围过滤器

1 个答案: