How to configure date sent to server when using using Ajax with the "function" option

lyleja

The documentation makes clear that a DataTable can be loaded via Ajax where the principle parameter to the Ajax routine is a function (rather than an object)
e.g.
$('#example').dataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
} );

The first parameter in the function prototype is "data" and is apparently used to send information to the server.

How is it possible to 'set' the data parameter prior to the function-call being made?

Specifically in the code below, I would like the string "{ spc: 'mySpc' }" to be passed as an arguement into the function callStoredProcedureViaAJAX . However no matter what I try, the first argument is always an empty object.

//  Code below does not work as intended:  
//   the data string "{ spc: 'mySpc' }" is NOT passed into the function
$('#example').DataTable({
        ajax: callStoredProcedureViaAJAX,
        data: "{ spc: 'mySpc' }", 
    columns: [
        { "data": "Username" },
        { "data": "FirstName" },
        { "data": "LastName" }
    ]
    });


function callStoredProcedureViaAJAX(data, callback, settings) {                                    

    $.ajax({
        type: "POST",
    url: 'rpcV4.aspx/ExecuteReader',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(data),
    dataType: "json",
    success: function(response) {
        let json = { data: JSON.parse(response.d) };
    callback(json);
    },
   error: function () {
      alert('Call not resolved')
    }
});    

}  // end of callStoredProcedureViaAJAX

I know I could set the data parameter directly within the function itself, but that limits its reusability.

Any help much appreciated!

allan

Pass it to your function and have the function return another function - e.g.:

$("#example").DataTable({
  ajax: callStoredProcedureViaAJAX({ spc: "mySpc" }),
  columns: [
    { data: "Username" },
    { data: "FirstName" },
    { data: "LastName" }
  ],
});

function callStoredProcedureViaAJAX(data) {
  return function (dtData, callback, settings) {
    $.ajax({
      type: "POST",
      url: "rpcV4.aspx/ExecuteReader",
      contentType: "application/json; charset=utf-8",
      data: JSON.stringify(data),
      dataType: "json",
      success: function (response) {
        let json = { data: JSON.parse(response.d) };
        callback(json);
      },
      error: function () {
        alert("Call not resolved");
      },
    });
  };
}

If you were using server-side processing (which you aren't, so it isn't anything to worry about, but I thought I'd note it), you'd need to merge dtData and the data object passed in.

Allan

lyleja

ingenious! - Thank you.

lyleja

Just a thought: in your answer-code, you may wish delete/change the comments in rows 1 and 2 , as these might be considered misleading; since the code now works.

allan

Good point! Fixed

I do love Javascript's functions capabilities...

Allan