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",

Answer 1

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);
}

Answer 2

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...

Answer 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);
}

Answer 4

You can create a json data string where you can pass extra parameters.

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