Pagination don't work when i remove and add rows

rafa_jesus_netsigma

I have a table that i can remove and add rows, everything is working except when i´m in a page of the table and try remove or add any row, the table only recognizes the current page and the others disappear.

This are the actions of the table:

// :: Begin Popup Actions ::
protected async Task AllTranslationPopup(ModuleTypesResponse moduleType)
{
    SelectedI18NCodes = UnselectedI18NCodes;

    SelectedModule = moduleType;

    var resultGetAllModule = await ModuleService.GetAllModules(new ModulesFilters { ModuleTypeId = moduleType.Id });

    if (resultGetAllModule.Data is { Count: > 0 })
    {
        ModuleResponseList = resultGetAllModule.Data;
        var codes = resultGetAllModule.Data.Select(x => x.CodeI18N).ToList();
        SelectedI18NCodes = UnselectedI18NCodes.Where(x => !codes.Contains(x.CodeI18N?.Code)).ToList();
    }
    else
    {
        ModuleResponseList = new List<ModuleResponse>();
    }

    StateHasChanged();
    await JS.InvokeVoidAsync("KTTablesTranslationListPopUp.init");
    await JS.InvokeVoidAsync("KTTablesModuleListPopUp.init");
    await JS.InvokeVoidAsync("eval", "$('#allTranslationPopup').modal('show')");

}

protected async Task HandleAddTranslationPopUp(CodeI18NTranslationSummaryResponse translationSummaryResponse)
{
    if (SelectedModule != null && ModuleResponseList != null && ModuleResponseList.All(x => x.CodeI18N != translationSummaryResponse.CodeI18N?.Code))
    {
        try
        {
            var moduleRequest = new ModuleRequest { ModuleTypeId = SelectedModule.Id, CodeI18NId = translationSummaryResponse.CodeI18N?.Id.ToString() };

            var result = await ModuleService.CreateModules(moduleRequest);

            if (result != null)
            {
                ModuleResponseList.Add(new ModuleResponse
                {
                    Id = result.Id,
                        CodeI18N = translationSummaryResponse.CodeI18N!.Code,
                        CodeI18NId = translationSummaryResponse.CodeI18N.Id.ToString(),
                        Name = translationSummaryResponse.CurrentLanguageShortName
                });

                SelectedI18NCodes.Remove(translationSummaryResponse);
                StateHasChanged();

                await JS.InvokeVoidAsync("KTTablesTranslationListPopUp.reloadTable");

                var successMessage = ModalHelper.LoadModalMessages("Submit");
                await JS.InvokeVoidAsync("KTSubmitEvent2.init", "allTranslationPopup", successMessage, true);

            }
           
        }
        catch (Exception ex)
        {
            // Handle error and show message
            var errorMessage = ModalHelper.LoadModalMessages("Submit");
            await JS.InvokeVoidAsync("KTSubmitEvent2.init", "allTranslationPopup", errorMessage, false);
        }

        StateHasChanged();
    }
}

protected async Task HandleDeleteTranslationPopUp(ModuleResponse moduleResponse)
{

    ModalMessages = ModalHelper.LoadModalMessages("Delete");
    var result = await JS.InvokeAsync<bool>("KTDeleteEvent.init", ModalMessages);

    if (result)
    {
        var deleteResult = await ModuleService.DeleteModules(moduleResponse.Id)!;

        if (deleteResult)
        {
           
            if (SelectedI18NCodes.All(x => x.CodeI18N?.Code != moduleResponse.CodeI18N))
            {
                SelectedI18NCodes.Add(new CodeI18NTranslationSummaryResponse
                    {
                        CodeI18N = new CodeI18NResponse
                        {
                            Id = Guid.Parse(moduleResponse.CodeI18NId!),
                            Code = moduleResponse.CodeI18N
                        },
                        CurrentLanguageShortName = moduleResponse.Name
                    });
            }

            ModuleResponseList?.Remove(moduleResponse);

            StateHasChanged();

            await JS.InvokeVoidAsync("KTTablesTranslationListPopUp.reloadTable");

            var successMessages = ModalHelper.LoadModalMessages("DeleteSuccess");
            await JS.InvokeVoidAsync("KTDeleteEvent.init", successMessages, ModalMessages, true);
        }
        StateHasChanged();
    }
}
// :: End Popup Actions ::

And this is my script:

"use strict";
// Class definition

"use strict";
// Class definition
var KTTablesTranslationListPopUp = function () {
    // Shared variables
    var table;
    var datatable;

    // Private functions
    var initDatatable = function () {
        // Set date data order
        const tableRows = table.querySelectorAll('tbody tr');

        tableRows.forEach(row => {
            const dateRow = row.querySelectorAll('td');
           
        });

        // Init datatable --- more info on datatables: https://datatables.net/manual/
        datatable = $(table).DataTable({
            "info": true,
            'order': [],
            'pageLength': 25,
            "columnDefs": [{
                "targets": 'no-sort',
                "orderable": false,
            }]
        });
    }


    // Search Datatable --- official docs reference: https://datatables.net/reference/api/search()
    var handleSearchDatatable = () => {
        const filterSearch = document.querySelector('[data-kt-filter="searchTranslationPopUp"]');
        filterSearch.addEventListener('keyup', function (e) {
            datatable.search(e.target.value).draw();
        });
    }

    var reloadTable = function () {
        if (datatable) {
            datatable.clear(); // Clear existing data
            datatable.rows.add($(table).find('tbody tr')).draw(); // Re-add rows and redraw
        }
    };

    // Public methods
    return {
        init: function () {
            table = document.querySelector('#kt_datatable1');
            if (!table) {
                return; // Se a tabela não existir, sai da função
            }

            // Verifica se o DataTable já existe
            if ($.fn.dataTable.isDataTable('#kt_datatable1')) {
                // Destrói o DataTable existente
                $(table).DataTable().destroy();
            }

            // Reconfigura o DataTable
            initDatatable();
            handleSearchDatatable();

        },
        reloadTable: reloadTable,
    };
}();



// Webpack support
if (typeof module !== 'undefined') {
    window.KTTablesTranslationListPopUp = module.exports = KTTablesTranslationListPopUp;
}

Probably my problem is with this function:

var reloadTable = function () {
        if (datatable) {
            datatable.clear(); // Clear existing data
            datatable.rows.add($(table).find('tbody tr')).draw(); // Re-add rows and redraw
        }
    };

but without this the table don't update the counter of rows when i add or remove rows.

Anyone can help?
Thanks!!

kthorngren

The only rows available for $(table).find('tbody tr')) to find are the rows displayed on the page. Datatables removes the rows from other pages. So yes on;y the rows on the page will then be in the Datatable after the rows.add(). Use rows().data() or rows().nodes() to get all the rows.

I'm not sure what the reloadTable function is needed for. It looks like the idea is to clear the Datatable then re-add the same rows to the Datatable. I'm not clear why you are doing this. Please explain what you are trying to accomplish with this function. I'm thinking that you don't really need it. See the next paragraph.

How are you adding and removing rows? Are you using row().remove() and row.add() for this? If not then Datatables won't know about the changes. Is this why you are calling the reloadTable function in an attempt to inform Datatables of the changes?

Kevin

rafa_jesus_netsigma

Yes, i'm calling the reloadTable to inform the Datatables of the changes when i add and remove rows. There is other way to do it?

"The only rows available for $(table).find('tbody tr')) to find are the rows displayed on the page." I suspected this was the problem but I can't solve it.

kthorngren

when i add and remove rows.

As I asked before how are you doing this?

You should use the Datatables API s row.add(), rows.add(), row().remove() and rows().remove() to add and remove the rows from the client side. Possibly you need to do this in-conjunction with the code you might have telling the server which rows to add and delete.

If you still need help please provide details of your row add and delete process and requirements.

Kevin

rafa_jesus_netsigma

var addRow = function (data) {
    if (!datatable) return;

    var button = document.createElement('button');
    button.type = 'button';
    button.className = 'btn btn-sm btn-danger';
    button.innerHTML = `
    <span class="indicator-label">-</span>
    <span class="indicator-progress">
        Please wait...
        <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
    </span>`;

    // Atribuir a função de clique ao botão
    button.onclick = function () {
        DotNet.invokeMethodAsync('R2Y_2024_WEB', 'HandleDeleteTranslationPopUp', data.id)
            .then(() => {
                console.log('Método C# invocado com sucesso.');
            }).catch(err => {
                console.error('Erro ao invocar o método C#:', err);
            });
    };


    // Adicionar a linha ao DataTable
    datatable.row.add([
        data.codeI18N, // Primeira coluna
        data.name, // Segunda coluna
        button.outerHTML // Terceira coluna (botão)
    ]).draw();
}

var removeRowByCode = function (code) {
    if (!datatable) {
        return;
    }

    // Find the row where the first column (index 0) contains the code
    datatable.rows().every(function () {
        var rowData = this.data(); // Get row data
        if (rowData[0] === code) { // Assuming code is in the first column
            this.remove(); // Remove the row
        }
    });

    datatable.draw(); // Redraw the table
};

I added this two funtions in .js file to add and remove rows from the datatable and deleted the reloadTable function, everything works fine except the click in the button added, the function in .razor file is not called

allan

button.outerHTML

Can returns a string and thus results in a new node - one which won't have a click event.

With DataTables 2 you can simply give it the DOM node - so button rather than button.outerHTML. Example here.

Allan

rafa_jesus_netsigma

Is there any way to rebuild the datatable without row.add() and row.remove() or without reload the page?
For example, when i add a row, the datatable is built completely new.

kthorngren

For example, when i add a row, the datatable is built completely new.

You can use clear() to clear the table followed by row.add() or rows.add().

Is there any way to rebuild the datatable

Looks like you are using DOM sourced table for the Datatable. You can use destroy() then empty and repopulate the HTML table followed by reinitializing the Datatable.

If this doesn't help then please provide more specific details of how you want this to work.

Kevin