initializing datatable produces duplicate ids

initializing datatable produces duplicate ids

mishu666mishu666 Posts: 5Questions: 1Answers: 0

I'm using DataTables to use client side paging on an asp.net gridview.
I have a dop-down list which determines the data for the tables, when I change the value on the list I get the new gridview using ajax then replace the current gridview containers with the ones received in the ajax call then I initialize the datatables again.
the error occurs when the datatables are initialized, not when the gridview containers are replaced.
The duplicate ids are only in the header row.
any suggestions?

I have a function that initializes the datatables -

function RecreateDataTables() {
 
    $(".UsersInPageGV").DataTable({
        scrollY: "60vh",
        stateSave: true,
        scrollCollapse: true,
        ordering: false,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    });
 
    $(".UsersNotInPageGV").DataTable({
        scrollY: "60vh",
        stateSave: true,
        scrollCollapse: true,
        ordering: false,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
    });
}

a function that gets the new tables via an ajax call

function BindGVs(success_callback) {
 
    let pageid = window.sessionStorage.getItem("pageid");
 
    data = { "PageID": pageid };
 
    $.ajax({
 
        method: "GET",
        data: JSON.stringify(data),
        url: "PageMembersEditor.aspx",
        error: function (r) {
            console.log("error");
            console.log(r.responseText);
        },
        success: success_callback
    });
}

a function that uses the data from the ajax call to replace the current tables with ones with updated data -

function BindGVsSuccessCallback(data) {
 
    let response = $(data);
    let UsersInPageSec = response.find("#UsersInPageSection");
    let UsersNotInPageSec = response.find("#UsersNotInPageSection");
 
    $("#UsersInPageSection").replaceWith(UsersInPageSec);
    $("#UsersNotInPageSection").replaceWith(UsersNotInPageSec);
 
    RecreateDataTables();
}

the RecreateDataTables function is called once at the beginning of document ready and is called every time the tables are replaces inside BindGVsSuccessCallback

Answers

This discussion has been closed.