Modify Server Side DataSource
Modify Server Side DataSource
Hello,
Is there a way to use the API and modify the AJAX datasource? Currently I have some radio buttons that when clicked will navigate to another page with another datatable (same exact column structure). However when they click the button I would rather use the API and change the datasource and redraw the table. Is this possible? I am looking at the example for Custom Filtering as I need to filter with min/max dates. This investigation triggered this question.
Thanks,
Joseph Crawford
Is there a way to use the API and modify the AJAX datasource? Currently I have some radio buttons that when clicked will navigate to another page with another datatable (same exact column structure). However when they click the button I would rather use the API and change the datasource and redraw the table. Is this possible? I am looking at the example for Custom Filtering as I need to filter with min/max dates. This investigation triggered this question.
Thanks,
Joseph Crawford
This discussion has been closed.
Replies
If you don't set bServerSide to true, filtering should indeed be possible; if it's not working for you then there's certainly investigation that can be done to fix the problem. When not using bServerSide, you will almost always have the server send back the whole data set, so that the client side can do the filtering on it.
I guess the fnReloadAjax plug-in could be modified to do this when server-side processing is found to be enabled...
Allan
Thanks Again!
[code]
$(document).ready( function() {
var oTable = $('#resourcelog').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "/admin/resourceajax/?resource=<?=$this->resource;?>",
"fnServerData": fnDataTablesPipeline,
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"oLanguage": {
"sZeroRecords": "No transactions found."
},
"sDom": '<"H"Tfr>t<"F"ip>',
"oTableTools": {
"sSwfPath": "/admin-assets/TableTools.swf",
"aButtons": [
"copy", "print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
/* numbers less than or equal to 0 should be in red text */
if(aData[2] != undefined) {
if ( aData[2].indexOf('D') == 0 ) {
jQuery('td:eq(2)', nRow).addClass('transactionDebit');
} else {
jQuery('td:eq(2)', nRow).addClass('transactionCredit');
}
}
return nRow;
},
} );
$( "#btnBar" ).buttonset();
$("#btnBar [name='radio']").change(function() {
var val = $(this).attr('id');
oTable.fnSettings().sAjaxSource = '/admin/resourceajax/?resource='+val
oTable.fnDraw();
})
} );
[/code]
The button-set it what I am trying to make reload the table when you click it, currently I have it doing a window.location to a new page which is the same template for every page and it just calls the ajax source with a different parameter.
AFTER the oTable.fnDraw I added this code to see if the source was actually updating, IT IS!
[code]
var oSettings = oTable.fnSettings();
alert(oSettings.sAjaxSource);
[/code]
when I click the radio buttons I get an alert with the proper ajax source, I am guessing the table is not redrawing with the new source because when I click a button the radio set changes but the table remains the same as it was prior to any click.
Any assistance would be appreciated.
Allan
but if I alert the sAjaxSource the proper URL is shown. Appears as if fnDraw() is
not doing anything :(
A link to your page would be very helpful.
Allan
I could provide you with the JS and some JSON output for you to run a test with. I would provide all JS for the radio buttons and table and also CSS. Let me know if that would help you.
Thanks,
Joseph Crawford
"fnServerData": fnDataTablesPipeline,
If I remove that line everything works however I am trying to pipeline the data as well so any thoughts on how I can make them work together?
Thanks,
Joseph Crawford
[code]
/**
* Pipelining data for the datatables for resource logs
*/
var oCache = {
iCacheLower: -1
};
function fnSetKey( aoData, sKey, mValue )
{
for ( var i=0, iLen=aoData.length ; i
[code]
$("#datepicker").daterangepicker({
dateFormat: "yy-mm-dd",
onChange: function() {
var value = $("#datepicker").val();
var resource = $("input[@name=radio]:checked").attr('id');
if(value.length > 10) {
/* we have a range we need to split */
var startDate = value.substring(0, value.indexOf(' - '));
var endDate = value.substring(value.indexOf(' - ')+3, value.length);
oTable.fnSettings().sAjaxSource = '/admin/resourceajax/?resource='+resource+'&start_date='+startDate+'&end_date='+endDate;
} else {
/* its a single date */
var startDate = value;
//oTable.fnSettings().sAjaxSource = '/admin/resourceajax/?resource='+resource+'&date='+startDate;
}
oTable.fnDraw();
},
});
[/code]
Demos of the datepicker can be found here: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/