时间戳

首页 > 解决方案 > 使用 HTML Builder 时使用日期范围过滤 - yajra Datatables

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

问题描述

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

标签： laraveldatatablesyajra-datatable

解决方案

您可以将 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 数据表作为服务的人有所帮助:)

推荐阅读