How to pass extra parameter on AJAX call of jQuery DataTable

Question

I pass the parameters using the following code as indicated on DataTable Documentation.

View:

$('#example').dataTable( {
      "ajax": {
           "url": "/Student/GetStudents",
           "data": function ( d ) {
               d.test= "some data";
           }
      }
});

Controller:

public ActionResult GetStudents(JQueryDataTableParamModel param, string test)
{
    //code omitted for brevity

    return Json(new
    {
        sEcho = param.sEcho,
        iTotalRecords = allRecords.Count(),
        iTotalDisplayRecords = filteredRecords.Count(),
        aaData = result
    },
    JsonRequestBehavior.AllowGet);
}

Although the "test" parameter is passed to the Controller, the values in the "param" parameter are null or 0 and that causing the datatable returns null data. On the other hand, if I use the following line instead of AJAX call in datatable parameters, all the values of param are passed to the Controller properly (but using AJAX call and this line also causes error). I need to pass extra parameter to the Controller and have to use AJAX call. How can I pass it while passing param values?

"ajaxSource": "/Student/GetStudents",

Solution 1

Finally I solved the problem by using fnServerData method as shown below.

"ajaxSource": "/Student/GetStudents",

//fnServerData used to inject the parameters into the AJAX call sent to the server-side
"fnServerData": function (sSource, aoData, fnCallback) {
    aoData.push({ "name": "test", "value": "some data" });
    $.getJSON(sSource, aoData, function (json) {
        fnCallback(json)
    });
},

...

Anyway, thanks a lot for the useful answers. Voted+ the useful ones...

Solution 2

Your javascript code:

$('#example').dataTable( {
      "ajax": {
           "url": "/Student/GetStudents",
            type: 'GET',
            data: {
                    test1: "This test1 data ",
                    test2: "This test2 data"
                }
        }
});


public ActionResult GetStudents(JQueryDataTableParamModel param, string test)
{
    //code omitted for brevity

     //printing in params in controller with asp.net code. 
     print_r("Data from" ,param.test1 ,param.test2);

    return Json(new
    {
        sEcho = param.sEcho,
        iTotalRecords = allRecords.Count(),
        iTotalDisplayRecords = filteredRecords.Count(),
        aaData = result
    },
    JsonRequestBehavior.AllowGet);
}

Solution 3

var finalArray = [];
var data = {'test':"some data","test1":"some data1"};
finalArray.push(data);
var rec = JSON.stringify(finalArray);

$('#example').dataTable( {
"ajax": {
   "url": "/Student/GetStudents",
   "data": rec
}
});

public ActionResult GetStudents(JQueryDataTableParamModel param,string test)
{
//code omitted for brevity

 //printing in params in controller with asp.net code. 
 print_r(json_decode(param));

return Json(new
{
    sEcho = param.sEcho,
    iTotalRecords = allRecords.Count(),
    iTotalDisplayRecords = filteredRecords.Count(),
    aaData = result
},
JsonRequestBehavior.AllowGet);
}

Comments

[Jack]

Any idea regarding to this problem???

[Jack]

I can already pass the parameter to the Controller but it causing the param parameters to be passed null or 0. By using your example the same result occurs and I just need to pass param values without "ajaxSource": "/Student/GetStudents" line. ANy idea?

[Ajay Thakur]

Use JSON.stringify(data) and send data. On controller end parse params using JSON.parse(params). check if it is working or not..?

[Jack]

Could you please update your answer by this approaches by indicating both: AJax call and Controller (stringfy conversion).

[Jack]

Any ide about this question?

[Jack]

Any ide about this question?

[Marcelo Gomes]

Thank you a lot! You saved my week!!! The new version (Nov/2018) of DataTables is not working with ajax {data: function() }.... The new structure of JSON posted to server is better than old version, but I did a small code to convert to new structure. When they fix this bug, I will plan to use the new ajax.data.