How to change the ajax sort parameter in Tabulator? Currently the ajax sort params are params.sorters[0]['field'] and params.sorters[0]['dir']
I cant find any solutions on how to customize it like I want to change the params.sorters[0]['field'] into "orderBy" and params.sorters[0]['dir'] into "dir"
EDIT: I'm using react-tabulator and Laravel as backend
The documentation for that is hidden away in the Pagination documentation. I use the paginationDataSent option for page but I'm not sure if it will work the way you describe for sorters. You'll have to do some experimentation.
Alternately, with a little more work you can write a custom ajaxURLGenerator to rewrite the parameters any way you want.
I had this same issue with tabulator-tables 5.07. In that case, it is now sending the sort params under the key sort instead of sorters.
The following example illustrates change the sorting parameter ('sort') back to the previous key ('sorters'). The following is the gist of how remote sort params can be modified:
let myTable = new Tabulator(myTableRef, {
placeholder: null,
ajaxURL: myAjaxUrl,
ajaxConfig: {
method: "POST",
headers: {
"Content-type": "application/json; charset=utf-8",
},
},
ajaxContentType: {
headers: { 'Content-Type': 'application/json' },
body: function(url, config, params){
// Rewrite 'sort' to 'sorters' to accomodate legacy api expectations.
if(params.hasOwnProperty('sort')){
Object.defineProperty(params, 'sorters',
Object.getOwnPropertyDescriptor(params, 'sort'))
delete params['sort']
}
return JSON.stringify(params)
}
},
// remainder of table definition.
Use Tabulator's ajaxContentType body to specify a function to write the body of the ajax request. If the sort parameter is present, modify params however is required. Finally, convert the params object to JSON and return that as the body content.
I simplified sort[0][field]=name&sort[0][dir]=asc to orderBy=name&dir=asc by using ajaxURLGenerator
new Tabulator("#myTable", {
autoColumns: true,
ajaxURL: 'https://myserver.com/api/items',
sortMode: 'remote',
ajaxURLGenerator: function (url, config, params) {
// Get ajaxURL
let myUrl = url;
// If sorting, then get the field name and direction
if (params['sort'].length > 0) {
let field = params['sort'][0]['field'];
let dir = params['sort'][0]['dir'];
myUrl += `&orderBy=${field}&dir=${dir}`;
}
// Return request URL
return myUrl;
}
});
Relevant documentation: