Only in screenwidth above 991px table.row(this).data() returns undefined

ernie999

So my mySQL CRUD project using the responsive dataTables.net plugin works fine as long as the screen width is less that 992px. Above that my variables using 'this' returns undefined and thus breaks my code:

comDirApp.js:201 Uncaught TypeError: Cannot read property 'employeeID'
of undefined'

var editEmployID = table.row(this).data().employeeID;

I am not using any custom media queries except for the default dataTables responsiveness. Any help on solving this would be greatly appreciated. Thank you.

I am using bootstrap 5 but even if I remove bootstrap the same problem occurs.
My JS code below:

//******** FUNCTIONS ************/
var table;
function populateTable() {
    $.ajax({
    url: 'libs/php/getAll.php',
    method: 'POST',
    dataType: 'json',
    success: function (result) {
        let tableData = result.data;
            table = $('#table').DataTable ({
            "responsive": true,
            "destroy": true,
            "data" : tableData,
            "order": [[ 2, "asc" ]],
            "columns" : [
                { "data" : "employeeID" },
                { "data" : "firstName" },
                { "data" : "lastName" },
                { "data" : "jobTitle" },
                { "data" : "email" },
                { "data" : "department" },
                { "data" : "location" },
                {"defaultContent" : `
                <button type="button" id='btn-edit' class="btn btn-primary">
                <i class="bi bi-pencil-square"></i> edit</button>
                <button type="button" id='btn_delete' class="btn btn-danger">
                <i class="bi bi-person-x-fill"></i> delete</button>
                `}
            ]
        });
    }
});
}

//******** EMPLOYEE RECORDS************/


//show edit employee modal with employee data
$(document).on('click', '#btn-edit', function () {
    
    $("#editEmployee").modal('show');
    var editEmployID = table.row(this).data().employeeID;
    
    $.ajax({
        url: 'libs/php/getPersonnel.php',
        method: 'POST',
        dataType: 'json',
        data: {
            id: editEmployID
        },
        success: function (result) {
            console.log('edit employee',result);
            $("#editEmployID").attr('value', result.data.personnel[0].id);
            $("#editFirstName").attr('value', result.data.personnel[0].firstName);
            $("#editLastName").attr('value', result.data.personnel[0].lastName);
            $("#editJobTitle").attr('value', result.data.personnel[0].jobTitle);
            $("#editEmail").attr('value', result.data.personnel[0].email);
            $('.employeeDepartment option[value="' + result.data.personnel[0].departmentID +'"]').prop("selected", true);

            deptID = $('.employeeDepartment option:selected').val();
            linkDeptLoc();
        }
    });
});

kthorngren

Sounds like you are saying that the buttons don't work when they are in the responsive child. One option is to take the approach from this example from this thread. It uses the data-dt-row attribute to define the parent row as described in the row-selector docs.

Any element which has a data-dt-row attribute assigned to it, or a parent (Since: 1.10.11). This can be used by extensions such as FixedColumns and Responsive to allow easy row selection.

Also note you are creating the same HTML id for each button. The id attribute is required to be unique on the page.

Kevin

ernie999

Thanks, sorry if I wasn't clear but basically it works in smaller screens but on a desktop screen table.row(this).data().employeeID doesn't work.

kthorngren

The same example works whether the buttons are in the Responsive Child or in the regular row. Basically the problem is this is not something that can be used as a row-selector. If you still have problems please provide a test case so we can help offer suggestions specific to your code.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ernie999

Ah ok thank you! Got it working now using the example code.