Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  November 2022

  I'm not sure if this is exactly what you are looking for:
  https://jsfiddle.net/o92cnha6/

  It shows the data of the clicked row, whether selected or not.

  The problem with your example is timing of the events. When you click a row your event fires before the row is selected so there are no {selected: true} rows. Now if you click a different row your event fires first and you get the data from the previously selected row before the row selection changes.

  Maybe you will want to use the select and deselect events instead. Just depends on what you are trying to do.

  Kevin
• lizthompson07 Posts: 3Questions: 1Answers: 0

  November 2022

  I'd like to be able to show the profile pics of one or more selected rows, but then as I deselect them, have those pics no longer show in the #events box.

  So if I were to use select/deselect, I'm still not sure how to only add each row once to #events and then remove them from #events on deselection, but I just tried to rework it with something like this:

  table.on( 'select', function ( e, dt, type ) {
      if ( type === 'row' ) {
          var test = table.rows({selected: true}).data();
                      var events = $('#events');
          // do something with the ID of the selected items
      /*     events.append(test);
          console.log(test) */
          
              for (let i = 0; i <test.length; i++) {
            events.append(test[i][6]);
          }
      }
  } );
  
  table.on( 'deselect', function ( e, dt, type ) {
      if ( type === 'row' ) {
          var test = table.rows({selected: true}).data();
                      var events = $('#events');
          // do something with the ID of the selected items
      /*     events.append(test);
          console.log(test) */
          
              for (let i = 0; i <test.length; i++) {
            events.remove(test[i][6]);
          }
      }
  } );
  
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  November 2022 Answer ✓

  Instead of trying to remove items when deselected just populate #events just use the same event handler for both select and deselect, like this:

  table.on( 'select deselect', function ( e, dt, type ) {
      if ( type === 'row' ) {
          var test = table.rows({selected: true}).data();
                      var events = $('#events');
          // do something with the ID of the selected items
      /*     events.append(test);
          console.log(test) */
           
              for (let i = 0; i <test.length; i++) {
            events.append(test[i][6]);
          }
      }
  } );
  

  This should overwrite #events with the currently selected rows.

  Kevin
• lizthompson07 Posts: 3Questions: 1Answers: 0

  November 2022

  That's it! Thanks Kevin. It's just missing the events.empty(); before the for loop to make it work as intended, if anyone else is looking to do this!

  So final solution:

  table.on( 'select deselect', function ( e, dt, type ) {
      if ( type === 'row' ) {
          var test = table.rows({selected: true}).data();
           var events = $('#events');
        
            events.empty();
            for (let i = 0; i <test.length; i++) {
            events.append(test[i][6]);
          }
      }
  } );