Datatables Checkboxes extension combined with Sortable

princeofabyss

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...

A working fiddle of the code I used 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?

allan

I noticed that a simple checkbox for each table row wasn't enough to select them when being paginated,

This example might be of interest. Or if you are using Ajax, collect the data using the DataTables API rather than a straight DOM method (I'd need a link to a test case showing the issue to know exactly how you are using it).

The "error" you are seeing is caused by the rows that are not needed for the current page not being displayed on the page to help performance. Thus they can't be queries (through the plain DOM APIs) or submitted.

Allan

princeofabyss

https://jsfiddle.net/princeofabyss/k5cfapzL/

Above is a working fiddle of the issue I'm describing!

allan

Ah I see - sorry, I'd misunderstood. Yes, using Sortable isn't going to work without a lot of updating of the DataTable based on the Sortable event handlers. It could probably be done, but it isn't something I've tried myself. Perhaps our RowReorder extension might be of some use (although it does do a data swap rather than a DOM reorder, which might or might not suit your needs - this is an example of it doing row editing).

Allan

princeofabyss

I tried that approach also (https://jsfiddle.net/princeofabyss/x104vwjp/3/), but a strange thing happens. When I re-order a row to a lower/higher position and release the mouse button, the row returns to its initial position...

Generally, I've tried SO many things and I'm at a complete loss right now... Could you please try to investigate a solution to my problem?

princeofabyss

Allan you can disregard my previous reply. The approach with the Checkboxes extension doesn't lead anywhere, and I need a solution to my problem...

I'm investigating the approach with normal checkboxes (not ones created by the Checkboxes extension), and try find a common ground with the link you shared in your previous reply, about using the DataTables API to go through the table rows, even the ones that are on another page...

So I created this fiddle which I'm currently working on, and I'm trying to apply the example of the DataTables API on it to retrieve checked rows of all pages of the table.

If you could it a try, I'd be grateful. The fiddle is here: https://jsfiddle.net/princeofabyss/okaxqc1j/

You can try to check some records, re-order the rows from the leftmost "handle" icon, then click the Get selected button, and notice that the returned ID in the console change their order as you re-order the rows.

The only problem with this approach, as I said, is that it only returns records from the current page...

princeofabyss

OK, I found it! It was dead-easy after you pointed me to the correct direction (the Datatables $() API... All I had to do is the following code and it returns all selected IDs, even from other than the current page...

$('#get-selected').click(function() {
console.log(questions.$('input[type="checkbox"][name="questions[]"]:checked').map(function() {
return this.value;
}).get());
});

allan

Awesome - nice one

To complete the square:

When I re-order a row to a lower/higher position and release the mouse button, the row returns to its initial position...

Sort of. As I said, it implements a data swap method, so the data, with the exception of the rowReorder.dataSrc property is swapped. This is perfect for editing as shown in the Editor example, but it is quite different from what Sortable does.

Allan