CODEWITHSUNDEEP
laraveldatatablesyajra-datatable
Abed Putra
Abed Putra

Reputation: 1215

Filter with date range while using HTML Builder - yajra Datatables

I used the Yajra Laravel Datatables and HTML Builder plugin for displaying my data, now I want to add two date input fields which are start date and end date that can be used to get the data within a range of time, so I can download the data according to date range. Please how can I go about this?

/**
 * 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'));
}

Blade

<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() !!}

I use

PHP Version : 7.2

Laravel Version: 6

Laravel-DataTables Version: 9.0

Upvotes: 0

Views: 2810

Answers (2)

Dharmesh Rakholia
Dharmesh Rakholia

Reputation: 1238

You can pass extra parameters in yajra datatable as service from frontend.

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

I hope It will be helpful for who use yajra datatable as service :)

Upvotes: 1

Aslam H
Aslam H

Reputation: 1801

If you view page source of your page this {!! $html->scripts() !!} generate this code

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

so DataTables instance store as global variable. This means any JS code will have access to this variable. in order to send a request with parameter you can do like this.

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

Upvotes: 0

Related Questions