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.
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!
Please or to participate in this conversation.