Passing an extra parameter to Java controller for jQuery datatables

Question

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!

Sunmit Girme Sunmit Girme · Accepted Answer · 2012-05-24T09:40:33

Got an answer. During initialization, fnServerData should be:

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    aoData.push( { "name" : "myTeamId", "value" : myTeamId  } );
                    $.getJSON( sSource, aoData, function (json) { 
                        fnCallback(json);
                    });
              }

and the onChange function of the combobox on which I want to pass the parameter:

    $("#projectTeams").change(function () {
        onTeamSelect($(this).val());
    }); 
    function onTeamSelect(teamId){
        myTeamId = teamId;
        oTable.fnDraw();
    }

where myTeamId is a global variable. The oTable.fnDraw() redraws the datatable and assigns the value of teamId to the myTeamId, which I use in fnServerData. This code worked for me!

Passing an extra parameter to Java controller for jQuery datatables

1 Answers