Datatables server side ajax and sAjaxSource have different request parameter

Question

I've made a datatable with server-side processing using sAjaxSource parameter.

$('#tbl-kamus').DataTable({
    "processing": true,
    "bServerSide": true,
    "sAjaxSource": srcUri ,
    ...

And when it made a request to server, it sends GET data with these parameter:

sEcho: 1
iColumns: 4
sColumns: ,,,,,,
iDisplayStart: 0
iDisplayLength: 30
mDataProp_0: 0
sSearch_0: 
bRegex_0: false
bSearchable_0: true
bSortable_0: false
mDataProp_1: 1
sSearch_1: 
bRegex_1: false
bSearchable_1: true
bSortable_1: true
mDataProp_2: 2
sSearch_2: 
bRegex_2: false
bSearchable_2: true
bSortable_2: true
mDataProp_3: 3
sSearch_3: 
bRegex_3: false
bSearchable_3: true
bSortable_3: false
sSearch: 
bRegex: false
iSortCol_0: 1
sSortDir_0: desc
iSortCol_1: 2
sSortDir_1: desc
iSortingCols: 2

and use those GET parameter in the php to process the request. then i need to add more parameter to the request, so i change the option into

$('#tbl-kamus').DataTable({
    "processing": true,
    "bServerSide": true,
    "ajax": {
         "url": srcUri,
         "data": {
         "user_id": userID
    }
    ...

And the whole request parameter changed into array-like thing:

draw: 1
columns[0][data]: 0
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: false
columns[0][search][value]: 
columns[0][search][regex]: false
columns[1][data]: 1
columns[1][name]: 
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]: 
columns[1][search][regex]: false
columns[2][data]: 2
columns[2][name]: 
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]: 
columns[2][search][regex]: false
columns[3][data]: 3
columns[3][name]: 
columns[3][searchable]: true
columns[3][orderable]: false
columns[3][search][value]: 
columns[3][search][regex]: false
order[0][column]: 1
order[0][dir]: desc
order[1][column]: 2
order[1][dir]: desc
start: 0
length: 30
search[value]: 
search[regex]: false
user_id: 2

so i have to change my server-side script to accomodate that, which i avoid. Then as a workaround, i keep using sAjaxSource and append the user_id into the url like :

"sAjaxSource":srcUri+"?user_id="+userID+"&",

what bothers me is why do they have different request parameters format. Can anyone please explain why are they different and what are the significance between each method?

EDIT:

I am sorry, perhaps my explanation wasn't quite clear. What i am asking here is not how to pass an argument in datatable ajax. Although i'm so grateful for the mention about fnServerParams, which is what i need atm.

What i am asking here is why are the request parameter between sAjaxSource and ajax so different? or perhaps both method have different purposes? i can't seem to find about it in the documentation.

Use fnServerParams instead of adding them programmatically. You really cant avoid the array style, since that is how DT passes back for example sorting on a certian column. It is all well documented at datatables.net — davidkonrad

jeetaz jeetaz · Accepted Answer · 2018-08-29T06:47:10

From the documentation:

Older versions of DataTables (1.9-) used a different set of parameters to send and receive from the server. As such scripts which are written for DataTables 1.10+ will not be able to function with DataTables 1.9-. However, DataTables 1.10 does have a compatibility mode for scripts written for 1.9-. This compatibility mode is triggered by use of the old sAjaxSource parameter (rather than the new ajax parameter) or by setting $.fn.dataTable.ext.legacy.ajax = true;

You're triggering compatibility mode when you use sAjaxSource with DataTables (1.10+) which sends and receives different set of parameters than legacy DataTables (1.9-).

Server Side Example with Custom HTTP variables - Legacy

Server Side Example with Custom HTTP variables

Datatables server side ajax and sAjaxSource have different request parameter

1 Answers