Select All rows in Datatables Server side or keep selected rows between pages

rabiaah

I've succeeded to develop server side for my big tables, all the functionalities working as expect except very important part which is the Select all and Deselect all rows in the tables.

As for now it's selecting only the visible page with 10 records for example, I know that when displaying all the rows in the same page it's resolving the problem but this is exactly what I don't want here.

I need one click on the Select All to select all the total listed or at least once moving between one screen and other to keep the selected rows there.

Can you please provide a simple solution for that?

kthorngren

It looks like the selector for the select all checkbox is $('th input.dt-select-checkbox'). One option might be to create a global variable to keep track of the select all checkbox state. Create an event handler that fires if any of the checkboxes are changed using the selector$('input.dt-select-checkbox'). Use the following to update the global variable:

('th input.dt-select-checkbox').prop('checked');

Finally use the draw event to click the checkbox if the global variable is true, for example:

$('th input.dt-select-checkbox').click();

You can try those statements in the console of this example.

Kevin

rabiaah

The Link you've shared here is exactly the problem I'm facing, once selecting page number 2 the selection from page 1 will be gone.

https://datatables.net/extensions/select/examples/checkbox/serverSide.html

can you please share step by step or working example?

colin

Kevin's solution above would require code, but if that's not working for you and you're unable to post it here, this thread should help, it's asking the same thing.

Colin

kthorngren

Here is an example of the step by step I proposed above:
https://live.datatables.net/yaroyala/43/edit

It uses the global variable allSelected to keep track of the Select All checkbox. Clicking either the Select All checkbox or any of the row checkboxes will fire this event to update allSelected:

    $('#example').on('change', 'input.dt-select-checkbox', function () {
      allSelected = $('th input.dt-select-checkbox').prop('checked');
    }); 

When server side processing fetches data from the server this event is fired to click the Select All button if it was checked previously:

    table.on('draw', function () {
      if ( allSelected ) {
        $('th input.dt-select-checkbox').click();
      }
    });

Kevin

rabiaah

Kevin your solution shared here not working as I need,

My request is simple, once the page 1 rows selected when moving to next pages I want to keep those selected and add more from the next page and so on...

One done and for any activity it will fire all the selected rows from all the pages.

If you can please check as the solution not working as expected and I was thinking that Datatables team should implement it to be part of the core version.

kthorngren

Kevin your solution shared here not working as I need,

Your original requirement only mentions the Select All checkbox. The example I provided does exactly that. If it doesn't then please provide the steps to show it not working.

My request is simple, once the page 1 rows selected when moving to next pages I want to keep those selected and add more from the next page and so on...

It sounds like you want to keep track of the individual rows selected on each page as you move between pages. Datatables doesn't support this with server side processing. There are two options; one is to implement custom code at the client side for this or two is to use the Gyrocode checkboxes plugin.

To implement keeping track of individual rows I would look at using another global variable to keep track of the individual rows. In the change event if Select All is checked then clear the variable otherwise add the selected rows to the variable. In the draw event if Select All is not enabled then use the array to re-select the rows at the client. How you do this depends on the data you have. Specifically you will need a column with unique data.

Use pluck() to get the unique data from the column and use selector-modifier to get the selected rows. Go to the example and open the console. Select multiple rows and execute this statement:

$('#example').DataTable().rows({ selected: true }).data().pluck('first_name');

The result is an array of first names. This can be appended to the global variable. Make sure all the values in the global variable are unique.

In the draw re-select the rows if Select All is not checked. Use rows() with a row-selector as a function to see if the first_name matches the array of names. With multiple rows select execute the following statements:

names = $('#example').DataTable().rows({ selected: true }).data().pluck('first_name');

Clear the selected rows then execute the following to re-select where the names are in the saved array:

$('#example').DataTable().rows((idx, data) => names.includes(data.first_name) ).select();

Alternatively if you are using rowId you can use rows().ids() to get the selected row IDs.

I would suggest updating my example with your code to keep track of individual rows. That way if you have questions we can easily help.

If you can please check as the solution not working as expected

The free community support of this forum isn't meant to implement full solutions for everyone. Its meant to help the developer to understand how to use Datatables. If you require a solution to be developed you can contact @alland and purchase a support option.

I was thinking that Datatables team should implement it to be part of the core version.

Read Allan's response in the thread Colin linked to.

Kevin

rabiaah

When select the rows from Page 1 and run the pluck I can see it's printing the two lines I've selected

M {0: 'Jonas', 1: 'Serge', ...

In my Data I'm using a hidden column with the internal unique ID so I can use it.

If possible to provide me example of how to save those rows or even when selecting the selectAll (it's same as I'm selecting all in the same page from my side) then when moving to 2nd page those selected will stay selected or listed in the console.

Thanks dear

kthorngren

In my Data I'm using a hidden column with the internal unique ID so I can use it.

Yes, did you try it?

If possible to provide me example of how to save those rows

I provided some examples of how to get the selected row, store them in an array and use that array to re-select the rows. If you want help with this then please update my example to show what you are doing so we can help debug.

then when moving to 2nd page those selected will stay selected or listed in the console.

You can use standard Javascript tools to combine the array from using pluck() with the global array and keep unique data. Use Stack Overflow to find the technique you want use use. For example this thread.

Kevin

rabiaah

I will try and update you, I have one concern regarding the data return in the Data json.

draw: 1
recordsFiltered: 438
recordsTotal: 438

I have tried to update the menu of aLengthMenu by adding the records total into the menu using drawCallback

I'm getting the total of records but menu keep showing me [10, 25, 50, 100]

I'm expecting to the [10, 25, 50, 100, 438]

Simply trying to have other approach of the selection of all the records.

kthorngren

See the second example of the lengthMenu docs to see how to select all rows. Not sure why you want to do this as it negates the purpose of using server side processing. All though it looks like you have only 438 records. Unless you are expecting 10 of thousands of records you can disable server side processing.

Kevin

kthorngren

What do you need to do when all the records are selected?

Kevin

rabiaah

I have many business flows to run, like send Push messages, Freeze or cancel the users and more...

Therefore, instead of selecting all, I want as for workaround now to add the total of the users, once selecting it from the pages it will show all then SelectAll will works as expected as for now.

later I will try figure out how to select all

rabiaah

Can you help with a working example of how to add the total back from server into the aLengthMenu?

kthorngren

I ask because if you are using server side processing your send push messages, for example, will need to be a server based solution otherwise it will only work with the rows displayed on the page. Similar to this FAQ about using export buttons with server side processing. You will need to send the selected row information to the server for processing. Probably a flag for Select All and another value for containing the selected row ID's

Kevin

kthorngren

Can you help with a working example of how to add the total back from server into the aLengthMenu?

Most of the Datatable options, like lengthMenu, don't support changes after initialization. If you want a specific value then you will need to use jQuery ajax() to fetch the number of rows. In the success function initialize Datatatbles with a lengthMenu array that includes the rows returned and your other options.

Kevin

kthorngren

I guess you could use jQuery or Javascript methods to manually update the select options. Use the browser's inspect tool to see the selector needed to access the select options, for example:

<select name="example_length" aria-controls="example" class="dt-input" id="dt-length-0"><option value="10">10</option><option value="25">25</option><option value="50">50</option><option value="100">100</option></select>

Use initComplete for this. The json parameter will contain the Ajax response including recordsTotal.

Kevin

rabiaah

I've managed with the count as it been picked from some other place and it's working as expected now only if it's greater than 100 will show up.

This option will let the user select the Maximum number of rows to show, then once selecting All user can proceed with the events needed.

But still I'm feeling it's not the best solution at least I still need to figure out a simple way not complex with ugly source code to be able selectAll or select individuals then when moving to the next page it will keep those selected.

If you can provide me a sample code of that approach it will be great, seems I didn't find any of the examples working for what I'm looking for.

Thanks dear in advance,

kthorngren

Ok, here is an example:
https://live.datatables.net/dixoyehu/1/edit

It uses the select and deselect events to add/remove the row id from the selectedRows variable. The draw event will iterate through all the selectedRows to re-select the rows on the page. If Select All is checked the selectedRows variable is cleared.

Note that with server side processing the selectedRows variable may contain information about the rows selected across all pages but that doesn't mean you can use rows( {selected: true} ) to fetch all the rows since they aren't at the client.

Kevin

rabiaah

It's keeping the selection in Page 1 and Page 2 which is great, but the total is wrong as it should be total of both pages.

Can you review?

rabiaah

Addtionally, I'm not using checkbox, I'm using the below config.

select: {
style: 'multi',
selector: 'td:first-child'
},

I'm selecting the Profile image from first column to select the whole row.
it's not really working with your example.

kthorngren

It's keeping the selection in Page 1 and Page 2 which is great, but the total is wrong as it should be total of both pages.

That is because the only rows truly selected are the rows on the page. You could use infoCallback to customize the output and provide your own stats for selected rows.

I'm selecting the Profile image from first column to select the whole row.
it's not really working with your example.

I was under the impression you are using the select checkbox with render: DataTable.render.select(). You didn't correct my assumption. I linked to this example and you stated this:

The Link you've shared here is exactly the problem I'm facing, once selecting page number 2 the selection from page 1 will be gone.

I spent my time creating multiple examples to meet your requested requirements based on that solution. If you want help with having this work for your specific solution then you will need to build a test case that replicates your solution with your attempt at keeping track of the selected rows. I have asked you to do this multiple times.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rabiaah

I've uploaded one for myself and see it's working, but I just got to know that I'm using old version: 1.10.16

https://cdn.datatables.net/1.10.16

Seems that's why it's not working for me, I will try check if it's possible to upgrade to the latest version, but seems it needs some changes in my code.

rabiaah

Issue resolved with the current version, first step we've succeeded,

Now I've other issues with the buttons like core buttons ,'csv', 'excel', 'colvis',

When trying to extract to csv for example, it's extracting only the selected rows of same Page.

Can you explain how to resolve it?

kthorngren

See this FAQ.

Kevin

rabiaah

Hi again,

// Listen for the selectAll event
table.on('selectAll', function (e, dt, type) {
console.log('All rows selected.');
alert("selectAll");
});

Not able to reach this event anymore, can you please advise?

kthorngren

As far as I know there isn't a selectAll event. All the events are listed here. Possibly you will need to create a click event for the checkbox in the header. For example:

$('.dt-select-checkbox', 'th').on('change', function () {
  console.log('Select All Checkbox clicked');
});

Kevin