Hide "Expand"-Icon on empty data ("Row Details")

jupix

Hi all,

I tried this function and it works fine: https://datatables.net/examples/server_side/row_details

It is possible to show the green "+" icon only on lines with existing data (data in row details)?
I also have some items with empty data in row details and I dont want to show the expand-button here.

Other question:
Is there a way to create a button: "expand all" / "collapse all"

Thanks
jup

colin

Hi @jupix ,

In that example, it's just using CSS to show the icon, but you could just as easily do something in one of the available callbacks: createdRow or rowCallback . There, you could see if there is child information, and add (or remove depending on your logic) the '+' at that time.

With the expand all/collapse all, yep, you could run code to do that. This example here is closing all opened child rows, thereby ensuring only one is displayed at a time. You could just as easily modify that example to open all when triggered by a button or some such,

Cheers,

Colin

jupix

Hi!

Thanks for your input.

I just did it the expand/collapse-function and it woks well ...:

<a href="#" onclick="closeAll()">Close</a>
<a href="#" onclick="expandAll()">Expand</a>

function closeAll() { table.rows().every( function ( rowIdx, tableLoop, rowLoop ) { if (this.child.isShown()) { this.child.hide(); $(this.node()).removeClass('shown'); } }); } function expandAll() { table.rows().every( function ( rowIdx, tableLoop, rowLoop ) { if (!this.child.isShown()) { this.child( format(this.data()) ).show(); $(this.node()).addClass('shown'); } }); }

But the other thing sounds hard ! (only show "+" if data is existing)
Could you also provide an example please ?!

thanks
jup

colin

Hi @jupix ,

Here you go - this is the example before, but now the child rows won't be available if you the 'Office' column is 'London'. You could use this as a template,

Cheers,

Colin

jupix

Hi Colin,
the link provided is the same as above?!
No changes in the code...

colin

That was odd, here it is again (I cloned another table): http://live.datatables.net/wayitifo/1/edit .

The important bit of code is:

      createdRow: function(row, data, line, cells) {
        if (data.office === 'London') {
          $(cells[0]).removeClass('details-control')
        }        
      }

Cheers,

Colin

kthorngren

@colin you must have posted the wrong link for your example.

Here is an example which doesn't display the expand button if there is no data available. It uses createdRow to check the data.

http://live.datatables.net/pifugoki/1/edit

Kevin

jupix

Cool - I got it
Thanks so much