For a project I'm working on, the admin of the system will be assigning questions to some quizes from a huge pool of questions. For better filtering of the questions upon their selection, I had to use Datatables. Then, I noticed that a simple checkbox for each table row wasn't enough to select them when being paginated, so after some research I found the Checkboxes extension for Datatables that would solve $_POST of the selected rows and pagination problems.
Everything worked fine with the transition, but the latest requirement of my project is the ability to re-order questions, so I also utilized jQuery Sortable, to re-order the question rows. But then I noticed that re-ordering the rows, doesn't actually re-order the selected rows returned by Datatables Checkboxes...
The minimal working code I used for a mockup of my project is below:
jQuery(function($) {
$('#questions-pool tbody').sortable({
connectWith: '#questions-pool tbody',
handle: 'td.move-handle',
});
var questions = $('#questions-pool').DataTable({
ordering: false,
dom: '<"#upper-controls"lf>t<"#lower-controls"ip>',
lengthMenu: [
[10, 50, 100, -1],
[10, 50, 100, 'All']
],
initComplete: function(settings) {
var api = this.api();
var selected = [387, 386, 385, 384, 383, 382, 381, 380, 379, 378];
api.cells(
api.rows(function(idx, data, node) {
return (selected.indexOf(Number(data[2])) >= 0) ? true : false;
}).indexes(),
3
).checkboxes.select();
},
columnDefs: [{
targets: 3,
checkboxes: {
selectAllPages: false,
}
}],
});
$('#get-selected').click(function(event) {
var form = $('#questions-form');
$(form).find('.questions-postfields').remove();
console.log('Deleted previous fields');
$.each(questions.column(3).checkboxes.selected(), function(index, rowId) {
$(form).append(
$('<input>')
// .attr('type', 'hidden')
.attr('name', 'questions[]')
.attr('class', 'questions-postfields')
.val(rowId)
);
});
});
});
Also a working fiddle of the code above can be found here. So the fiddle starts with some rows already selected by their respective checkboxes. I also have a button that emulates form submission, where upon the submission I've coded the script to create on-the-fly hidden fields for each selected ID. So upon clicking the button, the previous fields are removed and appended to the form from scratch. However, no matter how you re-order the rows, the selected IDs always appear in the same order.
Do you have any idea why this is happening?
