Answers

• rf1234 Posts: 2,957Questions: 87Answers: 416

  November 2016 edited November 2016

  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 Posts: 1Questions: 0Answers: 0

  August 2017

  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 Posts: 2,957Questions: 87Answers: 416

  August 2017

  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 Posts: 2,957Questions: 87Answers: 416

  August 2017

  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()