Modify Server Side DataSource

jcrawford

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

jcrawford

Also it appears that this custom filtering does not work when using an ajax source? I cannot seem to replicate your example when using server side anyway.

jcrawford

is this possible?

jcrawford

any thoughts on this Allen?

jcrawford

bump... Someone must know if this is possible and how to accomplish it.

jcrawford

bump again... anyone?

fbas

not sure if there's an API function for it yet, but what happens when you get oTables.fnSettings() and alter the sAjaxSource directly?

jcrawford

not sure could you show an example how to do that?

GregP

To answer your filtering question: when bServerSide is true, it is assumed that all DataTables is doing is sending along sort information with the GET parameters. The server should grab these and then do the sorting. With bServerSide set to true, you will GENERALLY only have the server sending back one visible page worth of data.

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.

fbas

oTable.fnSettings().sAjaxSource= "newurl";

allan

Yup then just call fnDraw and your new Ajax source URL will be used.

I guess the fnReloadAjax plug-in could be modified to do this when server-side processing is found to be enabled...

Allan

jcrawford

thanks for the information i will be trying to implement this soon now that I know it is possible.

Thanks Again!

jcrawford

I have tried to implement this without success, am I doing something incorrectly?

[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

If you look in Firebug at the outgoing XHR - does it request the correct resource? The code does look okay to me to cause a redraw from the new source.

Allan

jcrawford

there are no requests made when I click a radio button :(
but if I alert the sAjaxSource the proper URL is shown. Appears as if fnDraw() is
not doing anything :(

allan

Hmmm. And are there any Javascript errors on the console? There is a missing semi-colon after val, just before the fnDraw call, but that shouldn't matter too much.

A link to your page would be very helpful.

Allan

jcrawford

There are no errors in the console at all. Unfortunately you would not be able to access the application because it is locked down to internal only.

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

jcrawford

OK so I have found the issue but I am not sure why it will not work when this other stuff is in place. Ideally I would like it to work with these also in place.

"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

jcrawford

here is the code for the pipeline stuff

[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

jcrawford

also any idea why this code would generate 2 XHR requests every time I choose a date range?

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

jcrawford

I figured out why it was making 2XHR requests it had to do with the plugin. However I have still not been able to get this to work with the pipelining of data and that is a requirement also, any idea how I could make them work together?

jcrawford

Any thoughts on how I can make these work together Allan?