I am trying to pass a user defined parameter to the Java Controller which acts as a data source to my jquery Data-Table. The point is, i want to do this (pass the parameter) on a change event for a combobox on my jsp.
Here is my datatable initialization:
var oTable = $('#reqAllQueriesTable')
.dataTable(
{
"sDom": '<"H"l<"projectTeamTools">frtip>',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "query/getQuery",
"bPaginate" : true,
"bLengthChange": true,
"bScrollCollapse" : true,
"iDisplayLength" : 10,
"bFilter" : true,
"bJQueryUI" : true,
"sPaginationType" : "full_numbers",
"sSearch": "Search"
});
My combobox whose values are to be passed to the controller and the respective functions are:
$("div.projectTeamTools").html('Organize by Project Teams: <select id="projectTeams"><option value="0">Project Team</option><option value="1">All</option><option value="2">Not Associated</option><c:forEach var="projectTeam" items="${userProjectTeams}"><option value="${projectTeam.projectId}">${projectTeam.projectName}</option></c:forEach></select>');
$("#projectTeams").change(function () {
onTeamSelect($(this).val());
});
function onTeamSelect(teamId){
alert(teamId +" Selected");
//This function to pass the parameter to the datatable is supposed to be here.
oTable.fnDraw();
}
The datatable then displays the new data it receives from the ajax Source getQuery
.
PS: I cannot use fnServerParams as I am using the older version of datatables. I have tried using fnServerData but it did not help. I guess I am wrong in the way I am using the ajax function in fnServerData.
"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
});
I cannot see the parameter I want to pass in the 'Network XHR' in my browser when I select an item from the combo-box. Please help!