Collapsible/Expandable list in a td?

nguyenx

Hi,

I was wondering if it's possible to have like a collapsible/expandable list in a td. I have done this tutorial :
http://datatables.net/examples/server_side/row_details.html

But it is not exactly what I wanted because I only want to show the details in a cell from a column (not add a row below in row.child).

Let's say for instance that I have a list of items. For now, I am able to only showing the first item in one cell of the row but I'd like to make an ajax call and get all the items in the list. Then, I would like to have a collapsible/expandable list for one cell (td) so I can show the detailed items from the list.

This is an example of what I have right now and I think it doesn't look great.. :

Take the tutorial for example, let's say that the first person has many positions. I'd like to show the list of positions from that person.

Basically, I just want to click on the cell (td) and have the list of the items shown in the same cell.

If anyone has an idea, I'd appreciate the help!

Thank you.

colin

Hi @nguyenx ,

This example may help - it's updating the truncated position field with a new value when clicked upon. Where that code is changing the data, you would just issue that Ajax call and update the cell with that value.

Cheers,

Colin

nguyenx

Hello @collin ,

I tried looking for the ellipsis function but I can't seem to understand how it works ( $.fn.dataTable.render.ellipsis(10)(data, type, row); )

colin

That's not the important part, it's the click that's relevant to your issue.