Expanding text column with Responsive?

btb12

https://legacy.datatables.net/ref#

I know these are the legacy datatables, but I'd like to mimic exactly how the "Purpose" column is set up. With the truncated text and then the full the text after expanding the details.

How would I go about doing this?

colin

Hi @btb12 ,

Yep, you could do this with child rows - see the example here. There's also a plug to manage those ellipsis.

Cheers,

Colin

btb12

@colin Thank you! But I don't think child rows is what I'm looking for, as I'd like for the truncated text in my column to be a part of the parent row, but then expand to show the full text.

colin

Hi @btb12 ,

As, I see, how about something like this.

Cheers,

Colin

btb12

@colin Perfect, thank you!!

idris_bengali

sorry to hijack this thread is there a way to make this work as a toggle?

$('tbody').on('click', 'tr', function() {
    $(this).children('td:eq(1)').text(table.row( this ).data()[1]);
    table.cell(this, 1).invalidate('dom');
  })

on click show the entire text and on second click collapse back to original with our without ellipsis depending on the length, in this case 10.

if there is a way to achieve this with a combination of hover and onblurr that will also work.

colin

yep, line 2 there does the change of text - so you can grab the text, test the length, and if longer, set down - see here. The problem with this example is that the original data is in the DOM, so once changed, the value is lost. If you're using data, then cell().invalidate() with source set to data will work.

hover and onblur should behave the same too.

C

idris_bengali

I see this works as I would like. There is one issue though... There is a selection screen in the same html before the report is run. So this is what happens.

I click on the option, the selection screen opens up.. chorme debugger on .. no errors... the moment I click on the first filter critieria the tbody on click gets activated and get this error >> Cannot read property '1' of undefined in this function.

$('tbody').on('click', 'tr', function() {
//var text = table.row( this ).data()[1];
var text = $(this).children('td:eq(1)').text();
if (text.length > 45) {
text = table.row( this ).data()[1].substring(0,9) + '...';
}
else {
text = table.row( this ).data()[1];
}

is there a way to make the on click operate only within the body of the report.?

Once the data is rendered the selection screen will continue to be available to the user with the results rendered below it.

colin

Hi @idris_bengali ,

Could you modify that example of mine, please, so that it demonstrates the problem. It'll be easier to understand and diagnose,

Cheers,

Colin

idris_bengali

Colin,

I added a table above the datatable table with a selection of entity type. it raises the identical error mentioned earlier. I'm hoping my changes will auto save to your sample

Thanks much - Idris

idris_bengali

I created a milestone to your sample and here is the link

http://live.datatables.net/bucoqudu/22/edit

colin

The problem is because you've made the dropdown inside a table - so when you select that, the tbody click handler comes into play. I've changed it here so that the click handler only refers to the DataTables table.

idris_bengali

Thank you Colin and it works like a charm. I see the change $('#example tbody')..

the first click expands and the second clicks shrinks the text... The third and subsequent clicks do nothing to the displayed fields. this is good for now and maybe it can be fixed.

colin

It can be fixed with a bit more code and storing of the original values - see my comment above for the explanation.