Making vue datatable ajax parameters match the javascript ones

mshah

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hello all,

When using Vue, it looks like the ajax parameters are different then the javascript ones. Is there a way for the Vue component to send the same parameters as the javascript one?

Vue parameters:
sEcho=1&iColumns=3&sColumns=%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&sSearch_0=&bRegex_0=false&bSearchable_0=true&bSortable_0=true&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&sSearch=&bRegex=false&iSortCol_0=0&sSortDir_0=asc&iSortingCols=1&_=1684939555082

JS parameters:
draw=1&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1684933973166

allan

sEcho and friends are the legacy parameters for server-side processing. How are you initialising the DataTable component in view?

If you could create a minimal example using StackBlitz or similar, that would greatly aid debugging.

Allan

mshah

Thanks Allan. I'm using this example:

https://datatables.net/manual/vue

Here's the example: https://stackblitz.com/edit/vue-f6fjju?file=src%2FApp.vue

Can you let me know what the non-legacy version is?

Also if it helps, this is what's in my package.json:
"datatables.net": "^1.13.4",
"datatables.net-bs5": "^1.13.4",
"datatables.net-dt": "^1.13.4",
"datatables.net-editor-dt": "^2.0.3",
"datatables.net-select": "^1.6.2",
"datatables.net-select-dt": "^1.6.2",
"datatables.net-vue3": "^2.1.0",

allan

Ah - you are triggering legacy mode by using the sAjaxSource parameter. If you have a look at our reference of options you won't find it there. It is only referenced on our legacy site.

Update your initialisation to be:

{
    ajax: '/subscriptions/list',
    lengthChange: false,
    select: true,
    serverSide: true,
}

and that will send in the "modern" (for about that last 10 years ) format. There is also a note on that manual page about the legacy mode if you are interested.

Note that I've removed the options from the object which were already at their default value - e.g. ordering is enabled by default.

Allan

mshah

Thanks Allan. That worked.