Question

我使用了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

Answer 1

如果您查看页面的页面源，则此{!! $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>

Answer 2

您可以从前端将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数据表作为服务的人有所帮助：）

使用HTML Builder时按日期范围过滤-yajra数据表

2 个答案: