Closed dflow closed 9 years ago
This is how I do it:
This is a jQuery Datepicker (although, you could use anything!).
I change the Datatable template (although you can now use setOptions, and that would be the preferred way) so that this is added to the Javascript output:
"fnServerParams": function ( aoData ) {
aoData.push(
{ "name": "date", "value": $('input[name="date"]').val() }
);
},
Then, on the controller that creates my Datatable query, I simply check if the date
value has been set, and if it has, I will modify the query before passing it to Datatable::query
$query = DB::table('articles')
->where('company_id', $company_id);
if (Input::has('date')) {
$query = $query->where('date', '=', $query);
}
return Datatable::query($query)
->showColumns($columns)
->searchColumns($columns)
->orderColumns($columns)
->make();
Finally, adding to the javascript template the code to detect changes on the input field to refresh the datatable when the field is updated will bring it all together.
// ....
oTable = jQuery('#{{ $id }}').dataTable({
// ...
})
$('input[name="date"]').change(function() { oTable.fnDraw(); });
hi thanks for the informative reply
I tried to implement your solution, but couldn't get the start and end date input fields to be triggered. http://laravel.io/bin/xKm9N your advise
What error/behaviour are you seeing that is incorrect?
Hi, @dflow You can use:
http://www.datatables.net/plug-ins/api/fnReloadAjax
jQuery.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) {
// DataTables 1.10 compatibility - if 1.10 then `versionCheck` exists.
// 1.10's API has ajax reloading built in, so we use those abilities
// directly.
if (jQuery.fn.dataTable.versionCheck) {
var api = new jQuery.fn.dataTable.Api(oSettings);
if (sNewSource) {
api.ajax.url(sNewSource).load(fnCallback, !bStandingRedraw);
} else {
api.ajax.reload(fnCallback, !bStandingRedraw);
}
return;
}
if (sNewSource !== undefined && sNewSource !== null) {
oSettings.sAjaxSource = sNewSource;
}
// Server-side processing should just call fnDraw
if (oSettings.oFeatures.bServerSide) {
this.fnDraw();
return;
}
this.oApi._fnProcessingDisplay(oSettings, true);
var that = this;
var iStart = oSettings._iDisplayStart;
var aData = [];
this.oApi._fnServerParams(oSettings, aData);
oSettings.fnServerData.call(
oSettings.oInstance,
oSettings.sAjaxSource,
aData,
function (json) { /* Clear the old information from the table */
that.oApi._fnClearTable(oSettings);
/* Got the data - add it to the table */
var aData = (oSettings.sAjaxDataProp !== "") ? that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json;
for (var i = 0; i < aData.length; i++) {
that.oApi._fnAddData(oSettings, aData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
that.fnDraw();
if (bStandingRedraw === true) {
oSettings._iDisplayStart = iStart;
that.oApi._fnCalculateEnd(oSettings);
that.fnDraw(false);
}
that.oApi._fnProcessingDisplay(oSettings, false);
/* Callback user function - for event handlers etc */
if (typeof fnCallback == 'function' && fnCallback !== null) {
fnCallback(oSettings);
}
},
oSettings
);
};
$('input[name="start"]').change(function() { oTable.fnReloadAjax (); });
$('input[name="end"]').change(function() { oTable.fnReloadAjax (); });
setOptions
if you use branch development
because branch maste
no support) Datatable->
...
->setCallbacks(["fnServerParams" => 'function ( aoData ) {
/* this step important, it will pass param start, end to server */
aoData.push(
{
"name": "start", "value": $(\'input[name="start"]\').val()
}
);
aoData.push(
{
"name": "end", "value": $(\'input[name="end"]\').val()
}
);
}'])
...
-> render();
Good Luck.
@dflow Use the onChange
callback to get the datatable to redraw when the datepicker (see the docs at http://tamble.github.io/jquery-ui-daterangepicker/)
$(".date").datepicker({
onChange: function() {
oTable.fnDraw();
}
});
Hi great package!
How would you integrate a daterange picker i.e on a collection? https://github.com/dangrossman/bootstrap-daterangepicker and where can you format dates via Carbon?
thanks