在 Yajra Laravel 数据表中使用服务器端处理实现日期范围过滤器

Question

我有一个使用 Yajra Laravel 数据表的发票表。 我想使用“created_at”列过滤数据，该列存在于数据库的 invoices 表中，但不存在于表视图中。

这是我的数据表图像：

以及包含开始和结束日期的代码：

$(function() {
    $('#invoices_daterange').daterangepicker({
        opens: 'left'
    }, function(start, end, label) {
        console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    });
});

这是我的数据表 JS 代码

$(function () {
    let invoicedatatable = $('#invoicesdatable-table').DataTable({
        pageLength: 100,
        processing: true,
        serverSide: true,
        ajax: '{{ route('invoices.datatable') }}',
        columns: [
            {data: 'invoice_number', name: 'invoice_number'},
            {data: 'partner', name: 'partner.full_name'},
            {data: 'start', name: 'start'},
            {data: 'end', name: 'end'},
            {data: 'due', name: 'due'},
            {data: 'actual_invoice_amount', name: 'actual_invoice_amount'},
            {data: 'action', name: 'action', sortable: false, searchable: false},
        ],
        lengthMenu: [
            [10, 50, 100, 250, 3000, 5000],
            [10, 50, 100, 250, 3000, 5000]
        ],
        buttons: [{
            extend: 'colvis',
            text: '<i class="icon-three-bars"></i>',
            className: 'btn bg-blue btn-icon dropdown-toggle'
        }]
    });
});

我确实搜索并阅读了大部分关于它的主题，但找不到任何东西来实现它。

我想做的事：

是使用“created_at”列过滤数据，该列不在视图中，但存在于我的数据库中的发票表中。

怎么做？

Answer 1

我不熟悉你的 datepicker 小部件，所以我不能在我的示例中使用它。但我认为您应该能够调整以下内容以使用您的日期选择器。

在我的示例中，我在一个表单中有两个单独的日期字段（“from”和“to”），并带有一个“提交”按钮：

<div>
    <form id="filter-form">
        From:<input type="date" id="min-date" name="min-date">
        To:<input type="date" id="max-date" name="max-date">
        <input type="submit" value="Submit">
    </form>
</div>

你不需要使用表单（我这里使用了表单，因为它是一个简单的演示）。

在页面的脚本中（与定义 DataTable 相同的地方），我添加了一个“提交”函数：

var url = '{{ route('invoices.datatable') }}';

$( "#filter-form" ).submit(function( event ) {
  event.preventDefault();
  invoicedatatable.ajax.url( url ).load();
});

我实际上不需要提交表单，所以我使用event.preventDefault(); 禁用了默认提交。

invoicedatatable.ajax.url( url ).load(); 行解释如下。

在我的 DataTable 中，我更改了基本的 Ajax 调用：

ajax: '{{ route('invoices.datatable') }}',

到这里：

ajax: {
  url: url,
  type: "POST", // or 'GET' if you prefer
  data: function (data) {
    data.mindate = $('#min-date').val();
    data.maxdate = $('#max-date').val();
  }
},

这使用 DataTables 函数来操作 data 选项。这是我们将作为服务器端请求的一部分发送到服务器的数据。

我只是将两个新变量附加到现有数据 - mindate 和 maxdate。这些包含您需要在服务器中用于过滤的日期范围。

请注意，传递给函数的data 变量已经包含一些数据，由DataTables 提供用于服务器端处理。因此，我将这两个额外字段添加到现有数据中。

从浏览器发送到服务器的请求现在看起来像这样。您可以在列表底部看到mindate 和maxdate：

{
    "draw": "2",
    "columns[0][data]": "id",
    "columns[0][name]": "",
    "columns[0][searchable]": "true",
    "columns[0][orderable]": "true",
    "columns[0][search][value]": "",
    "columns[0][search][regex]": "false",
    "columns[1][data]": "name",
    "columns[1][name]": "",
    "columns[1][searchable]": "true",
    "columns[1][orderable]": "true",
    "columns[1][search][value]": "",
    "columns[1][search][regex]": "false",
    ... not all details shown
    "order[0][column]": "0",
    "order[0][dir]": "asc",
    "start": "0",
    "length": "10",
    "search[value]": "",
    "search[regex]": "false",
    "mindate": "2021-06-08",    // <--- mindate
    "maxdate": "2021-06-16"     // <--- maxdate
}

在表单提交事件中，有这样一行：

invoicedatatable.ajax.url( url ).load();

这一行导致 DataTable 中的ajax 调用被重新执行，并且表格被重新绘制。这是将日期作为标准请求的一部分发送到服务器的触发器。这与用户单击列对数据进行排序或从 DataTable 中的一页移动到另一页时的操作相同。

服务器可以处理这个请求，并以通常的方式从请求中提取两个日期字段。然后，它可以使用这些值来过滤数据，然后再构建响应，然后将其发送回 DataTable。