Get Hidden Column Info from DataTable while Using Multi Select

lizthompson07

I'd like to be able to display additional info from a hidden column for each row a user selects. I was able to get it to work how I would like using a button like in the 'Get Selected Item' example; however, I'd like to go a step further and have it display the info as you select and deselect the rows instead of having to push a button every time.

See https://jsfiddle.net/lizthompson07/ajtn0g29/41/

I've commented out the attempts at getting the data on click instead of button, but have come close with this, except I'm not sure how to remove the item from events after it's deselected. I also tried using selected:true to get the data instead of $(this), but there's always a lag of one click with the selected:true (i.e. it doesn't add the item until the next click you make after you've selected the row:

$("#example").on('click','tbody tr',function() {
               
        var events = $('#events');
      
      
            var test = table.rows($(this)).data(); 
         /* var test = table.rows({ selected: true }).data(); */
      
        for (let i = 0; i <test.length; i++) {
          events.append(test[i][6]);
        }
            });

kthorngren

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

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

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

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]);
        }
    }
} );