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.