Show only "Selected" rows

catchbobbie

I know this has been asked multiple times but I am not able to get it using any of methods I have seen so far.
I have a datatable with multi select property. I am utilizing the Select extension to achieve the same.

My dataTable is initialized as below.

var dTable = $("#tblLearningObjects").dataTable({
                processing: true,
                pageLength: 10,
                select: 'multi',
                dom: "<'row'<'col-sm-2'l><'col-sm-6'B><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                buttons: [
                    {
                        extend:'selected',
                        text: 'Show assigned',
                        className: 'btn-warning btn-sm shadow',
                        action: function (e, dt, node, config) {
                            if (node.text() == 'Show assigned') {
                                dTable.api().rows({selected: false}).nodes().to$().css({"display": "none"});
                                node.text('Show all');
                            } else {
                                dTable.api().rows({selected: false}).nodes().to$().css({"display": "table-row"});
                                node.text('Show assigned');
                            }
                        }
                    }
                ],
                lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                tooltip: true,
                destroy: true,
                fixedHeader: true,
                scrollY: '50vh',
                scrollCollapse: true,
                ajax: {
                url: url,
                type: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                data: {'userid': $userID},
            },
            columnDefs: [
                {
                    target: 0,
                    searchable: false,
                    orderable: false,
                },
                {className: 'hidden', targets: [0, 1]}
            ],
            columns: [
                //Column to display data
            ],

            //To highlight pre-selected rows
            createdRow: function (row, data) {
                if (data['assigned'])
                    this.api().row($(row)).select();
            }
            }); 

I am also extending the "Selected" button to select all the "Selected" in the table but it only shows rows from current page. Surprisingly if I use

console.log(dTable.api().rows().count()); // This returns all 45 rows

within my Select button action it shows me all 45 rows. So it means it can "see" all the data but not when I use the "select" condition.

console.log(dTable.api().rows({selected:true}).count()); //This returns only 3 rows (from 1st page) and not 12 (from all pages)

I've been looking at this code for so long that I cannot seem to find the issue. Any help will be appreciated.

Thanks.

allan

Hi,

With the 1.6 release of Select last week I actually added a button that does exactly this - the new button is showSelected. I've put a little demo together here: https://live.datatables.net/yicuruja/1/edit .

Allan

catchbobbie

Hi Alan,

Thanks for your reply.
This doesn't seem to work as expected as well. I am selecting rows while loading them from the database. The "Show Selected" button works for the pages which I have traversed through after loading.
I am suspecting my method of selecting the rows during load is the problem. Or the way I have it set up I would have to write a custom method to show selected rows.

kthorngren

The "Show Selected" button works for the pages which I have traversed through after loading.

Not sure I understand what you mean. I added the createdRow option you are using, slightly modified, in this example and it seems to work:
https://live.datatables.net/yicuruja/2/edit

Does this not do what you are asking?

It looks like you are directly manipulating the DOM to show/hide the rows, for example:

dTable.api().rows({selected: false}).nodes().to$().css({"display": "none"});

This is not supported by Datatables as it doesn't know about the rows you just hide. As far as Datatables is concerned these rows are still displayed. Anything causing a redraw of the table will result in these rows being shown again. The supported way to filter the row display is to use search(), column().search() or a search plugin.

Kevin

catchbobbie

Hi Kevin,

I have about 45 records which I am fetching from database. One of the column represents if the user has "selected" that record before so I need to show it as highlighted in my datatable.

I used following code to highlight such rows. I even used the rowCallBack function.

createdRow: function (row, data) {
                if (data['assigned'])
                    this.api().row($(row)).select();
            } 

This works as expected.

The "Show Selected" button works for the pages which I have traversed through after loading.

One the datatable is loaded and I press the "show selected" button, it only shows me selected records from first page. But when I manually move to 2nd page and then press the button it shows me records from both 1st and 2nd page. So to get the right result I have to move through all the pages and then press the button.
I hope it makes sense
Please let me know.

I

kthorngren

The "Show Selected" button works for the pages which I have traversed through after loading.

Is this a problem with your code or the example Allan provided?

The example Allan provided and that I updated with your createdRow seems to work as you describe. If its not please tell us what is not working as expected.

it only shows me selected records from first page. But when I manually move to 2nd page and then press the button it shows me records from both 1st and 2nd page.

I can see this with your solution for the reasons I described above.

Kevin

catchbobbie

My bad... It worked Thanks a lot.

Changed

this.api().row($(row)).select();

to

this.api().row(row).select();

You are a star

kthorngren

Using $(row) works in this updated test case:
https://live.datatables.net/yicuruja/5/edit

But use whatever works for you is what you should use

Kevin

catchbobbie

Ahhh

dataTable v/s DataTable

catchbobbie

One last question.

Is the updated file (Select extension) available to download. If yes, can I download a copy from https://datatables.net/download/packages

kthorngren

Looks like you can use https://datatables.net/download/packages to get the latest version or use the Download Builder.

Kevin