使用 HTML Builder 时使用日期范围过滤 - yajra Datatables答案

【问题标题】：Filter with date range while using HTML Builder - yajra Datatables使用 HTML Builder 时使用日期范围过滤 - yajra Datatables
【发布时间】：2020-05-20 00:02:52
【问题描述】：

我使用Yajra Laravel Datatables 和HTML Builder 插件来显示我的数据，现在我想添加两个日期输入字段，它们是开始日期和结束日期，可用于获取一段时间内的数据，所以我可以根据日期范围下载数据。请问我该怎么办？

/**
 * Show the application.
 * More info DataTables : https://yajrabox.com/docs/laravel-datatables/master
 *
 * @param Datatables $datatables
 * @return \Illuminate\Http\Response
 * @throws \Exception
 */
public function index(Datatables $datatables)
{
    $columns = [
        'name',
        'id_card',
        'date',
    ];

    if ($datatables->getRequest()->ajax()) {
        return $datatables->of(Attendance::all())
            ->addColumn('name', function(Attendance $user) {
                return User::where('id', $user->user_id)->first()->name;
            })
            ->toJson();
    }

    $html = $datatables->getHtmlBuilder()
        ->columns($columns)
        ->parameters([
            'responsive' => true,
            'autoWidth' => false,
            'dom' => 'Bfrtip',
            'buttons' => ['csv', 'excel', 'pdf', 'print'],
        ]);

    return view('backend.attendances.index', compact('html'));
}

刀片

<div class="card-body">
        <p id="date_filter" class="form-inline">
            <span id="date-label-from" class="date-label"><b>From:</b> </span><input class="date_range_filter date form-control input-sm" type="text" id="min" />
            <span id="date-label-to" class="date-label"><b>To:</b></span> <input class="date_range_filter date form-control input-sm" type="text" id="max" />
        </p>

        <div class="table-responsive">
            {!! $html->table(['class' => 'table table-hover']) !!}
        </div>
    </div>
........
........
{!! $html->scripts() !!}

我用

PHP 版本：7.2

Laravel 版本：6

Laravel-DataTables 版本：9.0

【问题讨论】：

标签： laravel datatables yajra-datatable

【解决方案1】：

您可以将 yajra 数据表中的额外参数作为服务从前端传递。

window.LaravelDataTables["dataTableBuilder"] = $("#dataTableBuilder").on('preXhr.dt', function (e, settings, data) {
    data.startDate= 2020-10-27  0:00:00;
    data.endDate = 2020-10-30  23:59:59;
  }).DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
      url: "{{route('route.index')}}",
      type: "GET"
    }
  });
  LaravelDataTables.dataTableBuilder.ajax.reload()

希望对使用 yajra 数据表作为服务的人有所帮助:)

【讨论】：

【解决方案2】：

如果您查看页面的页面源代码，则此{!! $html->scripts() !!} 生成此代码

window.LaravelDataTables["dataTableBuilder"] = $("#dataTableBuilder").DataTable

所以 DataTables 实例 存储为全局变量。这意味着任何 JS 代码都可以访问这个变量。为了发送带有参数的请求，您可以这样做。

<script>
    (function () {

        const doSubmit = () => {

            LaravelDataTables.dataTableBuilder.ajax.url({
                type: 'POST',
                data: function (d) {
                    d.start = document.getElementById('start').value
                    d.end = document.getElementById('end').value
                  }
                })

            LaravelDataTables.dataTableBuilder.ajax.reload()
        }

        const send = document.getElementById('send')
        send.addEventListener('click', doSubmit)

     })()
</script>

【讨论】：

第一次成功，第二次选择过滤URL ajax show /[object object]?data....，如何解决？
@AbedPutra 您可以查看以下答案。我也遇到了和你一样的错误。