Datatables Vue Responsive: Dynamic Search With Ajax Not Updating The Child Hidden Rows

paulhemen88

I'm using Datatables Vue Component with Responsive Plugin. There's dynamic search on page which works when user enters any keyword on the screen.

But, it looks like the child row data is not getting updated e.g Here's the Table options I'm using:

    const dataTableOptions = {
        columnDefs: [
            { sortable: false, targets: [1, 2, stockColumn.value] },
            { width: '15%', targets: 1 }
        ],
        searching: false,
        stateSaveCallback: function (settings, data) {
            sessionStorage.setItem(btoa('customerPortalProducts'), JSON.stringify(data));
        },
        stateLoadCallback: function () {
            return JSON.parse(sessionStorage.getItem(btoa('customerPortalProducts')));
        },
        paging: true,
        stateSave: true,
        stateDuration: -1,
        processing: true,
        serverSide: true,
        responsive: {
            details: {
                renderer: DataTablesCore.Responsive.renderer.listHiddenNodes(),
                display: DataTablesCore.Responsive.display.childRowImmediate
            }
        },
        dom: '<"d-flex justify-content-between align-items-center py-2"lfr>t<"d-flex justify-content-between align-items-center py-2"ip>'
    };

Filter Code:

    debounceTimer.value = setTimeout(() => {
        if (dataTable.value) {
            let currentPage = dataTable.value.dt.page();
            dataTable.value.dt.ajax
                .url(
                    route('xxx.yyy.zzz', {
                        table: 'dataTable',
                        search_keyword: filterSearch.value ?? '',
                        search_category: filterCategory.value??'',
                        search_sub_category: filterSubCategory.value??''
                    })
                )
                // .load(null, refreshPage);
                .load(() => {
                    dataTable.value.dt.page(currentPage).draw("page");
    })
        }
    }, 700);

The issue is that hidden node data is not updated e.g I'm using <template> to show the Product image. But that Image remains the same.

I came across multiple solutions e.g https://live.datatables.net/muhadabi/1/edit but I don't see .register() in dataTable.value.dt API. I can see the _redrawChildren method in the Datatables Responsive class but unable to call it. So I feel stuck.

paulhemen88

@allan do you have any suggestion

allan

Apologies - I haven't had a chance to look into this today. I'll try and do so tomorrow. If you are able to get an example of the issue on Stackblitz, that would be really helpful.

Allan

paulhemen88

Sure @allan Here;s the example:

https://stackblitz.com/edit/datatables-net-vue3-reactive-optyvfrg (Open preview in full window to see images)

If you take a look, I've created button to change the data dynamically. But the Image inside isn't getting updated in responsive view.

allan

I came across multiple solutions e.g https://live.datatables.net/muhadabi/1/edit but I don't see .register() in dataTable.value.dt API.

dataTable.value.dt there is an API instance, however, DataTable.register() is a static method on the global DataTable API object (i.e. DataTablesCore.Api.register(...) in this case).

However it doesn't some the issue: https://stackblitz.com/edit/datatables-net-vue3-reactive-sn4kxcmz?file=src%2FApp.vue .

I'm not 100% sure what is going wrong here I'm afraid. I'll need to make some time to dig into it.

Allan