Problem with passing a user defined parameter from dataTable to java controller.

sunmit9

Hi Allan, thank you so much for data tables. Its of great use.
I am looking to create a custom header using sDom as:

[code]var oTable = $('#myTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "query/getQuery",
"bPaginate" : true,
"bLengthChange": true,
"bScrollCollapse" : true,
"iDisplayLength" : 20,
"bFilter" : true,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"sSearch": "Search",
"sDom": '<"H"<"projectTeamTools">lrft>'
});[/code]

and i have created the div on my jsp as:

[code]$("div.projectTeamTools").html('Organize by Project Teams: ${projectTeam.projectName}');[/code]

i want to pass the selected value in the drop-down by calling a function 'onTeamSelect':

[code]function onTeamSelect(teamId){
alert(teamId +" Selected");
// i want to send this teamId to the Java controller, getQuery which populates my Data Table here
}[/code]

Is it possible to send the value of teamId to the getQuery method of my Java controller?

Also, when i create the sDom, i am unable to see the 'paginate' tool at the bottom of my data table. How to solve this issue?
Please help!

allan

> Also, when i create the sDom, i am unable to see the 'paginate' tool at the bottom of my data table. How to solve this issue?

You haven't got the pagination 'p' element in the sDom string.

> Is it possible to send the value of teamId to the getQuery method of my Java controller?

Yes - use fnServerParams to send extra parameters to the server.

Allan

sunmit9

Thanks, It solved the pagination issue.
The problem with using fnServerParams is that I want to send the new parameter to the controller from the 'onTeamSelect' method. Is this possible?

Sunmit

sunmit9

Also, I am confused about using fnServerParams and fnServerData with the aoData.push method in it.

allan

fnServerParam is the recommended way of sending extra parameters to the server as it is easier. fnServerData can be used (and was before 1.8.2) but you need to define your own Ajax call (which might or might not be what you want to do).

> The problem with using fnServerParams is that I want to send the new parameter to the controller from the 'onTeamSelect' method. Is this possible?

You need to get the value from what has changed - something like $('#mySelect').val()

Allan

sunmit9

This is what Im trying to do:

[code]
"fnServerData": function ( sSource, aoData, fnCallback ) {
$("#projectTeams").change(function() {
aoData.push( { "name": "myParam", "value": $("#ComboBox option:selected").value() } );
$.ajax( {
"dataType": 'json',
"url": sSource,
"data": aoData,
"success": fnCallback
} );
oTable.fnDraw();
});
}
[/code]

projectTeams is a combobox which has the value of the parameter I want to pass to the controller.
But it doesn't work. Using the above code does not populate my datatable.

By [quote]you need to define your own Ajax call[/quote], do you mean that i need to create a new function that will return a JSON object and call it from the above method in $("#projectTeams").change(function() ?

allan

> do you mean that i need to create a new function that will [...]

No I just mean you need to write the $.ajax call as you have done. Using fnServerParams would save you about 10 lines of code.

Don't put your change() event callback inside the fnServerData - what is happening is that when fnServerData is called it is bringing the callback handler, which is only then fired when you change the select list...!

[code]
fnServerParams: function (a) {
a.push( { "name": "myParam", "value": $("#ComboBox option:selected").value() } );
}
[/code]

Then after you've initialised the DataTable:

[code]
$("#projectTeams").change(function() {
dataTable.fnDraw();
} );
[/code]

Allan

sunmit9

Using fnServerParam does not pass an extra parameter to the AJAX source! Is this the problem with the version 1.7.5 I am using. Its not feasible for me to update to 1.9.1. So can you suggest me a work-around that will help me do what I am intending to!

[code]
"fnServerParams": function (a) {
$("#projectTeams").change(function() {
alert("in fnServerParams");
aoData.push( { "name": "myParam", "value": $("#projectTeams").value() } );
[/code]

It doesn't even show me the alert!

allan

So if 1.9 is no an option you need to use fnServerData as before - but, read again my comment about putting the change event handler inside the callback function. As I said before, that is not what you want to do. I'm not going to write the code for you (unless you want to purchase DataTables support) :-). The information above should contain everything needed to get this working - just use fnServerData in a similar way to what I wrote above.

sunmit9

Okay! I'll try doing it using fnServerData.!
Thanks for all the help :)

~Sunmit