Dynamic sAjaxSource

sitsum

Hi Allan,

Thank you for your great creation of the DataTables, i am sure i has saved countless hours for many developers around the world!

I am building a CRM system which have a very similar layout as to Outlook. on the left side you will have a list of folders, in the middle you will have the records that are relevant to the folder that was selected by the user and then on the right side will be the actual details of the record that the user has selected.

I am able to implement the look&feels most of the functionalities of the DataTables to the way i wanted the only hurdle left is now i can redraw/load/initial the table based on the users' selection of the folders.

So what i am after is, are there anyway we can change the e.g. "sAjaxSource": "server_processing.php" to something like "sAjaxSource": "server_processing.php?folder_id=1" on the fly without having to reload the PAGE whenever the user click on the any of the folders?

michaeladam

Yes, it is possible to update sAjaxSource on the after initialization of the table. The api plugin fnReloadAjax should be what you need: http://datatables.net/plug-ins/api.

Alternatively, you could use the fnServerParams callback to detect the folders selected. http://datatables.net/ref#fnServerParams

sitsum

Hi Michaeladam, thank you for your time to reply my question.

i have decided to use fnServerParams instead of fnReloadAjax since i am using 1.8.2 and its less code and looks easier.

here is part of my code:

$(document).ready(function() {
oTable = $('#example').dataTable( {
"iDisplayLength": 25,
"sPaginationType": "full_numbers",
"aaSorting": [[ 1, "desc" ]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"bDeferRender": true,
"aoColumns" : [null, null, null, null, null, { "bSearchable": false}, null, null, null, null, null, { "bSortable": false}, { "bSortable": false}],
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
if ( jQuery.inArray(oObj.aData[1], aSelected) !== -1 ) return ' ';
else return ' ';
},
"aTargets": [12],
}
],
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "list_id", "value": listId } );
}
} )


$('#toDoList').click( function () {
oTable.fnDraw();
} );

my question is when #toDoList is click how do it press the selected listId onto fnDraw/fnServerParams?

michaeladam

For your implementation: Inside fnServerParams you will need to look for your list and determine which was clicked. This method really requires some other callbacks and state monitors.

The fnReloadAjax is actually be the best option in your case. All you need to do is include the code on the plugin page (also shown below) into your website and that is it. You shouldn't need to edit the plugin code. Then all you need to do is call [code]oTable.fnReloadAjax("NEWURL");[/code]

Your links could look like:
[code]
Link 1
Link 2
[/code]

fnReloadAjax code:
[code]
$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;

oSettings.fnServerData( oSettings.sAjaxSource, [], 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

sitsum

HI michaeladam, thank you for your input here. thats exactly what i need.

but i did work out how to do that with fnServerParams

i create a hidden text field, whenever the user make a selection it will update the value with the listId and then it will trigger the oTable.fnRedraw here is my code:

[code]
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "list_id", "value": $('#hiddenId').val() } );
}

$('#toDoList').click( function () {
oTable.fnDraw();
} );
[/code]

no the most elegant way but it works and doesnt require that many lines of code

cbattarel

a very simple question : i want to pass a post parameter to the server_processing.php (dont want to pass a get parameter because it may be very large - it's the sql request...)

how can i do it ?


$('#resume').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../common/php/server_processing.php",
"sServerMethod": "POST",
here is my lack of knwoledge... how-to transmit a post parameter ?
} );

allan

Use fnServerData :-)

Allan

cbattarel

that's what i thought but i was not sure.. can you confirm that the data passed in aoData will be received in the $_REQUEST of the php script ?