Check pre-selected rows in a jQuery Datatable

Question

I have a jQuery DataTable below:

examinees_table = $('#examinees_table').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            /*select*/      null,
            /*id*/          {"bVisible": false},
            /*name*/    null,
            /*course*/  null
        ]
    });

And here's my HTML:

<table id="examinees_table">
                        <thead>
                            <tr>
                                <th>Select</th>
                                <th>ID</th>
                                <th>Full Name</th>
                                <th>Degree</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach($users as $user) {?>
                                <tr>
                                    <?php foreach ($examinees as $examinee) {?>
                                        <?php if($examinee->examinee_id == $user->id) {?>
                                            <td class="center"><?= Form::checkbox('is_examinee-'.$user->id, null, (bool) true, array('id' => $user->id)); ?></td>
                                        <?php } else {?>
                                            <td class="center"><?= Form::checkbox('is_examinee-'.$user->id, null, (bool) false, array('id' => $user->id)); ?></td>
                                        <?php } ?>
                                    <td class="center"><?= $user->id; ?></td>
                                    <td class="center"><?= $user->first_name.' '.$user->last_name; ?></td>
                                    <td class="center"><?= $user->courses->description; ?></td>
                                    <?php }?>
                                </tr>
                            <?php }?>
                        </tbody>
                    </table>

What I want to do:

I need to load all the registered users from my Users table and check each user in my datatable whose ID is in my Examinees table.

I am updating a list of examinees, so the user can remove(uncheck) existing examinees and add more examinees. I can get the checked rows before submitting the form, but I don't have a way to determine which of the existing examinees were unchecked so I could remove there ID in the Examinees table.

What could be a best approach for this? I don't feel that what I did in my HTML is the best solution.

Answer 1

I have found a way to get my desired output, in my datatable I used the fnCreatedRow function to check each created row if it's in the EXISTING EXAMINEES array:

examinees_table = $('#examinees_table').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "aoColumns": [
            /*select*/      null,
            /*id*/          {"bVisible": false},
            /*name*/    null,
            /*course*/  null
        ],
        "fnCreatedRow": function( nRow, aData, iDataIndex ) {
            var eID = $('#existing_examinees').val();
            if(eID === undefined) {
                return;
            }

            var eIDArray = eID.split('/');

            var deletedID = $('#removed_examinees').val();
            var deletedIDArray = deletedID.split('/');

            if(eIDArray.length > 0) {
                $.each(eIDArray, function(index, value) {
                    var id = $("input:checkbox", nRow).attr('id');                      
                    // alert('index: ' + index + ' ' + 'value: ' + value + ' ' + 'id: ' + id);
                    if(id == value) {
                        $("input:checkbox", nRow).prop('checked', true);
                    }
                });
            }
            $("input:checkbox", nRow).click(function() {
                var selected_id = $("input:checkbox", nRow).attr('id');
                var checked = $("input:checkbox", nRow).prop('checked');
                if(checked == false) {
                    var deleted_index = $.inArray(selected_id, eIDArray);
                    var inDeletedArr = $.inArray(eIDArray[deleted_index], deletedIDArray);
                    if(inDeletedArr < 0) {
                        if(deleted_index > -1) {
                            var removed = $('#removed_examinees').val();
                            if(removed == '') {
                                removed = eIDArray[deleted_index];
                            } else {
                                removed = removed + '/' + eIDArray[deleted_index];
                            }
                            $('#removed_examinees').val(removed);
                        }
                    }
                }
            });
        }
    });

I also added an onClick listener to add existing examinees that are unchecked which will be submitted to the server when the form is submitted.

Answer 2

There are two ways of doing it:

1. Clear every examinee id from the database before adding the ones that come with the POST data.
2. Implode the POST id array, delete the ones NOT IN (id1, id2, ...) and add the new examinees.

PS. To avoid duplicate code move the examinee == user condition to the checked attr.

<?= Form::checkbox('is_examinee-'.$user->id, null, ($examinee->examinee_id == $user->id), array('id' => $user->id)); ?>

PPS. the examinee foreach seems weird, maybe you should do a subselect.