Editing a link table with Mjoin

rf1234

Maybe of interest to others with a similar use case:

I have a data table that only has the purpose to allow the user to make a preselection of departments using a checkbox. Editor is required to create or delete an entry in the link table between "user" and "department". On change of the checkbox I submitted an edit request to server if the box was checked and a remove request if the box was unchecked.
This worked ok. The only issue was that Editor on the client side removed the entire row from the display even though only the link table entry was removed. I found a workaround. I simply replaced the remove request by submitting null to the server. This also removes the link table entry while keeping the row at the front end.

Here is my code example (Javascript):

var ctrDeptSelectionEditor = new $.fn.dataTable.Editor({
    ajax: {
        url: 'actions.php?action=tblCtrDeptSelection'
    },
    table: "#tblCtrDeptSelection",
    fields: [ {
            name:      "user[].id",
            type:      "checkbox"
        }
    ]        
});

var ctrDeptSelectionTable = $('#tblCtrDeptSelection').DataTable({
    dom: "Bfrltip",
    select: false,
    ajax: {
        url: 'actions.php?action=tblCtrDeptSelection'
    },
    columns: [
        {   data: "user[].id",
            render: function ( data, type, row ) {
                if ( type === 'display' ) {
                    return '<input type="checkbox" class="editor-include">';
                }
                return data;
            }
        },
        {   data: "ctr_govdept.dept_name" },
        {   data: "userRole",
            render: function ( data, type, row ) {
                return renderRole(data);
            }
        },
        {   data: "ctr_installation", render: "[,<br>].instName"  },
        {   data: "gov", render: "[,<br>].govName"  },
        {   data: "gov", render: "[,<br>].govRegional12"  }
    ],
    order: [[1, 'asc'], [0, 'asc']],
    buttons: [
           "colvis" 
    ],
    rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table
        $('input.editor-include', row).prop( 'checked', data.user_has_selected_ctr_govdept.user_id >= 1 );
        if ( data.user_has_selected_ctr_govdept.user_id >= 1 ) {
            $(row).addClass('fontThick');
        } else {
            $(row).removeClass('fontThick');
        }
    }    
});
    
$('#tblCtrDeptSelection').on( 'change', 'input.editor-include', function () {
    var uid = [];
    if ( $(this).prop( 'checked' ) >= 1) {
        uid = [currentUserId];
    } else {
        uid = [null];
    }
    ctrDeptSelectionEditor
        .edit( $(this).closest('tr'), false )
        .set( 'user[].id', uid )
        .submit();            
} );

allan

Nice one. Thanks for sharing this with us!

Allan