Show only selected rows/ Hide rows not selected

anu_vaid

Here's what I came up with to show only selected rows on button click (I am using select and buttons extensions)

        buttons: [
                {
                    extend: 'selected',
                    text: 'Show selected rows only',
                    action: function ( e, dt, button, config ) {
                        if (button.text() == 'Show selected rows only') {
                            dt.rows({ selected: false }).nodes().to$().css({"display":"none"});
                            button.text('Show all');
                        }
                        else {
                            dt.rows({ selected: false }).nodes().to$().css({"display":"table-row"});
                            button.text('Show selected rows only');
                        }
                    }
                }
            ],

It works we'll, but I was wondering if I am doing it right and if this can be improved.

rf1234

Thanks a lot for this! This really helped. I changed it a little:
- When you select one row all other rows are hidden
- A "Show all" button is shown as soon as you have selected one row
- if you click this button all rows reappear and the button disappears again (meaning that the "Show all" button is only visible once you have selected one row.)

var userTable = $('#tblUser').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: 'test_backend.php',
            type: 'POST'
        },
        columns: [
            { data: "user.title" },
            { data: "user.acad" },
            { data: "user.firstname" },
            { data: "user.lastname" },
            { data: "user.role" },
            { data: "user.email" }
        ],
        select: {
            style: 'single'
        },            
        buttons: [
            { extend: "create", editor: userEditor },
            { extend: "edit",   editor: userEditor },
            { extend: "remove", editor: userEditor },           
            {
            name: "showAllButton",
            text: "Show all",
            action: function ( e, dt, button, config ) {
                dt.rows({ selected: false }).nodes().to$().css({"display":"table-row"});
                dt.buttons('showAllButton:name').nodes().css({"display":"none"});
                }
            }
        ]
    } );
    userTable
            .on ('select', function ( e, dt, type, indexes) {
                dt.rows({ selected: false }).nodes().to$().css({"display":"none"});
                dt.buttons('showAllButton:name').nodes().css({"display":"inline"});
            });
         
    userTable
            .on ('init', function ( e, settings, json) {
                userTable.buttons('showAllButton:name').nodes().css({"display":"none"});
            });

egokat

That button seems to work only for one page of data, instead of the whole table. Do you have a solution for all pages?

Also, if combined with the 'selectAll' button, the custom button doesn't behave as desired (i.e. press 'Show Selected Rows', then 'Select All' and then 'Show All'. It will show nothing.) A way to fix this is to replace
dt.rows({selected:false})
in the else statement with
dt.rows().

rf1234

Right it shows one page of data; that's what it was meant to do. This may be everything or just part of the data depending on your paging and page length settings. The button was not meant to overwrite those settings but you can surely add this to the button's functionality.

rf1234

Maybe interesting for you. Since I am using my "ShowAll" button quite frequently I defined it as a custom button that I can reuse everywhere:

var showAllLabel = 'Show All';
if (lang === 'de') {
    showAllLabel = 'Alles Anzeigen';
}
//custom button added with language specific label
$.fn.dataTable.ext.buttons.showAll = {
    text: showAllLabel,
    className: 'btn-showall-color hidden',
    name: "showAllButton",
    action: function ( e, dt, button, config ) {
        dt.rows({ selected: false }).nodes().to$().removeClass('hidden');
        dt.rows({ selected: true }).rows().deselect();
        dt.buttons('showAllButton:name').nodes().addClass('hidden');          
        //if show all button is clicked, a potential search will be reset and the table is redrawn.
        if (dt.search() > '') {
            dt.search('').draw();
        }
    }
};

and a usage example:

.....
buttons: [
     {   extend: "create", editor: userEditor },
     {   extend: "edit",   editor: userEditor },
     {   extend: "remove", editor: userEditor },
               "colvis",
     {   extend: "showAll", className: "showAllUserTable"   }
 ]
} );
    
$('.showAllUserTable').click(function() {
   hideTbls( [userPhoneTable, userAddressTable, userSecTable, userGovDeptTable,
              userCreditorTable, userLGFTable, userLogTable] );
} );

Once you click the button all the child tables of the selected row are being hidden. In this example you can select a user from the parent table. Subsequently you can see and edit all the information of that user which is in child tables: e.g. her various phone numbers, addresses, roles, departments and what have you ... Clicking on the "ShowAll" button means you show all users and hide all child tables until you select the same or another user.

If you wanted to really show all rows not just the ones of the current page you would probably need to do this:

$.fn.dataTable.ext.buttons.showAll = {
    text: showAllLabel,
    className: 'btn-showall-color hidden',
    name: "showAllButton",
    action: function ( e, dt, button, config ) {
        dt.rows({ selected: false }).nodes().to$().removeClass('hidden');
        dt.rows({ selected: true }).rows().deselect();
        dt.buttons('showAllButton:name').nodes().addClass('hidden');
        dt.page.len( -1 ).draw();          
        //if show all button is clicked, a potential search will be reset and the table is redrawn.
        if (dt.search() > '') {
            dt.search('').draw();
        }
    }
};

I added this line

dt.page.len( -1 ).draw();

pls see: https://datatables.net/reference/api/page.len()