使用HTML yajra数据对象时使用日期范围进行筛选

Question

我使用Yajra Laravel数据和HTML生成器插件来显示我的数据，现在我想添加两个日期输入字段，分别是开始日期和结束日期，它们可以用来在一定的时间范围内获取数据，这样我就可以根据日期范围下载数据。请让我怎么做？

/**
 * 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

Answer 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()

我希望它对那些使用作为服务的人有帮助:)

Answer 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>