Unable to change the Ajaxsource dynamically for serverside processing of datatables

bsp

Hi,

I am using Datatables serverside processing. Let me give a little bit background of what i am trying to do:
On the web page, I have a datatable and a dropdown with few values like newyear, christmas etc..
Initially when the webpage is loaded the ajaxsource for the datatable is set to a value called which is
unmanagedstring = unmanaged + '/' + eventname;
1. unmanaged: does not change eg: http://xyz.com/filename/methodname/parameter1
2. eventname: This is set to the initial selected value in the dropdown when the is initially loaded which is christmas, But this value changes based on the selected value in the drop down, if the initial selected value in the dropdown is christmas then the eventname is christmas. so initially the ajax source would be : http://xyz.com/filename/methodname/parameter1/christmas
and when the user selects another value for eg Newyear, the ajaxsource is change to : http://xyz.com/filename/methodname/parameter1/newyear

what i am trying to achieve is based on the value selected in the dropdown i would like to change the ajaxsource and then redraw the table using oTable.fnDraw(). But for some reason this is not working, even when I call fnDraw on dropdown is changed I still get the same rows in the datatable ( which was loaded initially when the page loaded with http://xyz.com/filename/methodname/parameter1/christmas) when I expect a new set of rows based on the ajax source :http://xyz.com/filename/methodname/parameter1/newyear

I checked the backend code and it seems to return the right amount of rows, but i am not sure wht needs to be set so that datatable takes the dynamically changed ajaxsource and binds the datatable with the new set of rows.I was going though this forum and for server side processing most of the discussion point to oTable.fnDraw(). oTable.fnDraw() works fine when I don't use the dynamic ajax source. I can the see the something is refreshed, but the issue is :

if http://xyz.com/filename/methodname/parameter1/christmas returns 4 rows and when the fndraw() is called when the drop down is changed to say newyear,I see some refresh but it still shows 4 rows of christmas ajaxsource when the blc is returning 5 rows for http://xyz.com/filename/methodname/parameter1/newyear.

can anyone help me to resolve this issue.

my settings for the datatable goes like this:
// initially there is a default value for unmanaged and eventname
var unmanagedstring = unmanaged + '/' + eventname;
$('#dtSetuptable').dataTable({
'bServerSide' : true,
'bAutoWidth' : false,
'bStateSave': false,
'bJQueryUI': true,
'sPaginationType': 'full_numbers',
'sAjaxSource': unmanagedstring,
'aoColumns' : [
{ 'sName': 'Name'},
{ 'sName': 'Age',
....................................

my jquery when the eventdropdown ( which has christmas and NewYear) is changed

$("#eventdropdown").change(function() {
eventname = $("#eventdropdown option:selected").val();
var oTable = $('#dtSetuptable').dataTable();
unmanagedstring = unmanaged + '/' + eventname;
//alert(unmanagedstring); - showing correct path which is the ajax source
oTable.fnDraw();

});

allan

How about a plug-in like this:

[code]
$.fn.dataTableExt.oApi.fnNewAjax = function ( oSettings, sNewSource )
{
    if ( typeof sNewSource != 'undefined' && sNewSource != null )
    {
        oSettings.sAjaxSource = sNewSource;
    }
    this.fnDraw();
}

// Example call
oTable.fnNewAjax( "/my/new/url" );
[/code]

I've not actually tried it, but that should work :-)

Allan

jamiep

Just wanted to confirm that this solution works as described and saved me a lot of pain

Thanks Allan

allan

Great to hear :-)

Allan