Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

smccoy78's avatar

Yajra Datatables Date Range Filter

Hello, I have implemented Yajra's datatables plugin on my site and everything works so far. That was until I added a date range filter. For some reason, when my filter results are returned the month number on my start date is being used as an offset in the query. If I take the query that is generated and remove the offset I get the desired results. I am kind of at a loss on what I have done incorrectly. If anyone is able to assist me I would greatly appreciate it.

Controller

public function index()
{
    return view(orders.orders);
}

public function getIndexData()
{
    $arrStart = explode("/", Input::get('start'));
        $arrEnd = explode("/", Input::get('end'));
        $start = Carbon::create($arrStart[2], $arrStart[0], $arrStart[1], 0, 0, 0);
        $end = Carbon::create($arrEnd[2], $arrEnd[0], $arrEnd[1], 23, 59, 59);

        $orders = Orders::between($start, $end);

return Datatables::of( $orders )
            ->addColumn( 'action', function ( $orders )
                {
                    return '<a href="orderdetails/' . $orders->id . '" class="btn btn-xs btn-primary"><i class="fa fa-truck"></i></a>';
                }
            )
            ->make( TRUE );
}

Model scope

public function scopeBetween($query, Carbon $from, Carbon $to)
    {
        $query->whereBetween('created_at', [$from, $to]);
    }

javascript

var oTable = $('#orders-table').DataTable({
                dom: 'frtBp',
                buttons: [
                    {
                        text: 'Print Selected Orders',
                        action: function ( e, dt, node, config )
                              {
                                  alert( 'You clicked me!' );
                              }
                    }
                ],
                stateSave: true,
                paging:     true,
                pagingType: 'simple_numbers',
                lengthMenu: [ [ 15, 30, 50, -1 ], [ 15, 30, 50, "All" ] ],
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! route( 'orders::getindexdata' ) !!}',
                        data: function(d) {
                            d.start = $('input[name=start]').val();
                            d.end = $('input[name=end]').val();
                        }
                    },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'order_date', name: 'order_date' },
                    { data: 'ship_name', name: 'ship_name' },
                    { data: 'ship_company', name: 'ship_company' },
                    { data: 'ship_street1', name: 'ship_street1'},
                    { data: 'ship_city', name: 'ship_city' },
                    { data: 'ship_state', name: 'ship_state' },
                    { data: 'ship_zip', name: 'ship_zip' },
                    { data: 'contact_email', name: 'contact_email'},
                    { data: 'domain', name: 'domain'},
                    { data: 'action', name: 'action', orderable: false, searchable: false, width: '10px', sClass: "selectCol" },
                ]
            });
    $('.input-daterange').datepicker({
                 autoclose: true,
                 todayHighlight: true
            });

            $('#dateSearch').on('click', function() {
                oTable.draw();
            });

view

<div class="box-body table-responsive">
                        <div class="row">
                            <div class="col-xs-4 form-inline" style="position: absolute; z-index: 2;">
                                <div class="input-daterange input-group" id="datepicker">
                                    <input type="text" class="input-sm form-control" name="start" value="{{ Carbon::now()->format('m/d/Y') }}" />
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="input-sm form-control" name="end" value="{{ Carbon::now()->format('m/d/Y') }}"/>
                                </div>
                                <button type="button" id="dateSearch" class="btn btn-sm btn-primary">Search</button>
                            </div>
                        </div>
                        <table class="table table-bordered table-hover" id="orders-table">
                            <thead>
                                <tr>
                                    <th>Order ID</th>
                                    <th>Order Date</th>
                                    <th>Name</th>
                                    <th>Company</th>
                                    <th>Street</th>
                                    <th>City</th>
                                    <th>State</th>
                                    <th>Zip</th>
                                    <th>Email</th>
                                    <th>Domain</th>
                                    <th align="center" style="padding-right: 15px;">Action</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>

I have no idea what I have done to cause it to change the offset and any help is appreciated. Thanks!

0 likes
3 replies
smccoy78's avatar
smccoy78
OP
Best Answer
Level 5

Just in case anyone else runs into this issue, I have figured it out. The problem was in my ajax call. I set the date variables names as "start" and "end", this was causing a conflict since datatables uses start for the pagination variable therefore setting the offset based on this value. I changed my variable names and everything works as expected.

7 likes
cris's avatar

I found this solution a long time and I was very helpful, thanks @smccoy78. Greetings from Chile.

1 like

Please or to participate in this conversation.