Making vue datatable ajax parameters match the javascript ones

Making vue datatable ajax parameters match the javascript ones

mshahmshah Posts: 19Questions: 5Answers: 1

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

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • mshahmshah Posts: 19Questions: 5Answers: 1
    edited May 2023

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • mshahmshah Posts: 19Questions: 5Answers: 1

    Thanks Allan. That worked.

Sign In or Register to comment.