when onclick tr from datatable1 give show datatable2 from

oomsinboy

When I onclick tr from datatable1 give get datable2 errors from pressing repeatedly

function listpole(data){
    $('#Add_Device').hide();
    let tablepole ='';
    for (let i = 0; i < data.length; i++) {
        let value = data[i];
        tablepole += `
        <tr style="color: #fff;" onclick="onclick_tr(${value.id})" data-id="${value.id}">
            <td>${value.id}</td>
            <td>${value.locationNameTH}</td>
            <td>${value.name}</td>
            <td>${value.latitude}, ${value.longitude}</td>
            <td>
                <span class="mode ${value.status === 'true' ? 'mode_on' : 'mode_off'}">
                ${value.status === 'true' ? 'Online' : 'Offline'}</span>
            </td>
            <td>                                    
                <button class="button_lo" onclick="getViewBtnPole(${value.id})" data-toggle="modal" data-target="#preview"><i class="bi bi-eye-fill"></i></button>
                <button class="button_lo edit" onclick="getEditBtnPole(${value.id})" data-toggle="modal" data-target="#addPole"><i class="fa-solid fa-pen"></i></button>
                <button class="button_lo delete" onclick="DeleteBtnPole(${value.id})" data-toggle="modal" data-target="#modal_del"><i class="fa-solid fa-trash"></i></button>
            </td>
        </tr>
        `
    }
    document.getElementById('tbody_listpole').innerHTML = tablepole;
    $('#tbody_listpole').html(tablepole).promise().done(() => {
        $('#smartpole_table').DataTable({
            
            dom: 'Bfrtip',
            lengthChange: false,
            responsive: true,
            scrollY: "63vh",
            buttons: [ 'copy', 'excel', 'pdf',],
            pageLength: 11,
            ordering: true,

        })

    })
    
}

function onclick_tr(id){
    // console.log(id);

     $("tr").removeClass("active");
    $("tr[data-id='" + id + "']").addClass("active");
    $('#Add_Device').show();
    fetch(readPointDevice+id)
        .then(response => response.json())
        .then(data => {
            // console.log('data device:',data);
            
            let tabledevices = '';
            data.map((value,idx) => {
                // console.log(value.lastTelemetry);

                tabledevices += `
                    <tr class="ceterTD" style="color: #fff;">
                        <td>${value.id}</td>
                        <td>${value.devName}</td>    
                        <td>${value.groupName}</td>
                        <td>${value.type}</td>                          
                        <td><span class="mode ${value.lastTelemetry.find(telemetry=>telemetry.key==='status') ? (value.lastTelemetry.find(telemetry=>telemetry.key==='status').value == 'true' ? 'mode_on' : 'mode_off') : 'mode_off'}">
                        ${value.lastTelemetry.find(telemetry=>telemetry.key==='status') ? (value.lastTelemetry.find(telemetry=>telemetry.key==='status').value == 'true' ? 'Online' : 'Offline') : 'Offline'}</span></td>
                        <td>
                            <button class="button_loX edit" onclick="getEditBtnDevices(${value.id})" data-toggle="modal" data-target="#addDevice"><i class="fa-solid fa-pen"></i></button>
                            <button class="button_loX delete" onclick="DeleteBtnDevice(${value.id})" data-toggle="modal" data-target="#modal_del"><i class="fa-solid fa-trash"></i></button>
                        </td>
                    </tr>`            
            });
            document.getElementById('devices_table_body').innerHTML = tabledevices;
            $('#devices_table_body').html(tabledevices).promise().done(() => {
                var dx = $('#devices_table');
                if (dx.length && !dx.hasClass('dataTable')) {
                  dx.DataTable({
                    dom: 'Bfrtip',
                    lengthChange: false,
                    responsive: true,
                    scrollY: "63vh",
                    buttons: [ 'copy', 'excel', 'pdf',],
                    // pageLength: 11,
                    ordering: false,
                    columns : [
                      { "width": "7%" },
                      { "width": "15%" },
                      { "width": "15%" },
                      { "width": "18%" },
                      { "width": "14%" },
                      { "width": "12%" },
                    ],
                  });
                }

            })
            // table_Device.clear();  // Clear existing data
            // table_Device.rows.add

            
        })
        idAdd = id

}

when I onclick tr from datatable1 datable2 errors from pressing repeatedly

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Can you link to a test case showing the issue, per the forum rules please? That way I can debug it.

Allan

oomsinboy

How?

colin

Information on how to create a test case (if you aren't able to link to the page you are working on) is available here. This example here may be a good starting point, it's hard two tables on the page.

Cheers,

Colin