With server-side processing, Select All doesn't work
With server-side processing, Select All doesn't work
klee777
Posts: 12Questions: 2Answers: 0
As I have about half-million rows, first I tested without server-side processing. It took more than 30 sec to display the data. For searching (by typing a character), or changing page also took more than 20 sec.
To be able to select a multiple rows, I added the control-click and created 2 buttons: one with "Select all" (to select the entire table) and the other with "Deselect all" (to deselect the entire table) with this:
function selectAll() {
var table = $('#myTable').DataTable();
table.rows({ search: 'applied' }).select();
};
function deselectAll() {
var table = $('#myTable').DataTable();
table.rows({ search: 'applied' }).deselect();
};
// mimic ctrl+click
$("#myTable").on('click', 'tr', function (event) {
var selRows = table.rows('.selected').indexes();
if ($(this).hasClass('selected')) {
if (event.ctrlKey) {
$(this).removeClass('selected');
} else {
if (selRows.length > 0) {
table.rows(selRows).deselect();
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
}
}
else {
if (!event.ctrlKey) {
if (selRows.length > 0) {
table.rows(selRows).deselect();
}
}
$(this).addClass('selected');
}
});
Despite the unacceptable performance, these 2 functions worked perfectly: "selectAll()" selected all rows from the 1st page all the way to the last page. Any selected & unselected rows were remembered: for example, I selected only 2 rows in Page 1, changed to Page 2, and came back to Page 1, Those 2 rows are still selected.
So, I changed it to Server-side processing. The result was unbelievably fast: less than 2 second!!!
However, there are some problems with selecting the rows. "selectAll()" only selects all rows in the current page (e.g. Page 1), and when I change to Page 2, none of them are selected. When I come back to Page 1, those previously selected rows in Page 1 are all unselected.
Here are my questions.
1. How to make "selectAll()" to select the entire rows in the table?
2. How to remember the selected rows when navigating the pages?
Thank you in advance.
This question has an accepted answers - jump to answer
Answers
Datatables doesn't have any built in features to select server side rows nor keep track of what has been selected on page navigation.
I would look at using a global variable as a flag to keep track of the select all state. Use the
drawevent to use the flag to determine the need to select or deselect all on the page. You may need three states; one for select all, one for deselect all, and one for partial/user selected rows.One option is to use the Gryrocode select checkboxes plugin. You will see that page navigation keeps the user selected rows. The select all/deselect all checkbox doesn't keep track.
Or you can implement your own solution using the
selectanddeselectand maybe theuser-selectevents. Like the Gyrocode solution this will require keeping track of a unique ID for the table.Another consideration is if a user selects all then deselects one row how to keep track.
The best way for us to help is if you start a SSP test case with one of these templates. Probably best to use
ids-objects.phpto have a unique id.Kevin
I think this is to be expected - the row selection is a client-side construct, and with server-side processing only the rows shown are actually present at the client-side. Select them all, and you've got "all" 10 which are currently shown.
If you want to actually select all rows, there are two options:
Allan
This has been asked before so you might find some threads on the forum to help.
Kevin
Thank you @kthorngren and @allan .
I will study further!
I had a bit of time to work up a simple demo. It was more complex than I thought. Keeping track of select/deselect all by itself wouldn't be too bad nor would keeping rack of the user selected rows. But together it gets a bit complex.
http://live.datatables.net/pijefuze/1/edit
I've only done some basic testing and it seems to work. It doesn't support the users being able to select multiple rows at once with shift nor does it keep track of using the
row().select()APIs. I didn't do anything to update the info element. Getting the selected rows viarows( { selected: true} )will only get the rows on the page.The example uses the following:
rows().ids()toArray()cell().index()Kevin
I updated the test case to keep the select info element updated. I used the
select.infooption to remove the default select info element. I replicated the select info element display in theselect/deselectevent.http://live.datatables.net/bejuqido/1/edit
Kevin
Nice, Kevin, that works well!
Colin
Wow. Fantastic~~!!!! I can't believe it~~~!!! Thank you very much @kthorngren
I just want to say "Thank you" again. I just confirmed it is working.
Hi @kthorngren,
With server-side off, I used the send the selected data to the server. As the 1st column is the ID of the table in the database, I only saved them as an array, like this:
How can I achieve this with your implmentation?
Sorry, I couldn't understand page.info() or '.select-info' etc.
The
userSelectedvariable is used to keep track of all the user selections even on different pages. When select all is clickeduserSelectedis cleared androwsToSelectholds the row id's of the current page rows on the page. TheuserUnselectedkeeps track of the user deselected rows, for example use select all the click one row to deselect. BothuserSelectedanduserUnselectedare cleared when Select All or Deselect All are clicked. I added a button you can use to see this:http://live.datatables.net/bejuqido/3/edit
This solution keeps track of the row ID's not the row indexes like you have above.
Hopefully this explains the options available for sending the selected rows to the server. If you want to keep track of selecta ll then you may need to include a select all flag and the user unselected rows. just depends on what you need to keep track of.
Kevin
@kthorngren Thank you Kevin! After posting the last question, I kind of figured it out, and your answer with the sample makes it all clear. I truly appreciate it.