Expanding text column with Responsive?

Expanding text column with Responsive?

btb12btb12 Posts: 6Questions: 3Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 3,105Questions: 0Answers: 538

    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

  • btb12btb12 Posts: 6Questions: 3Answers: 0

    @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.

  • colincolin Posts: 3,105Questions: 0Answers: 538
    Answer ✓

    Hi @btb12 ,

    As, I see, how about something like this.

    Cheers,

    Colin

  • btb12btb12 Posts: 6Questions: 3Answers: 0

    @colin Perfect, thank you!!

  • idris_bengaliidris_bengali Posts: 18Questions: 2Answers: 1
    edited December 5

    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.

  • colincolin Posts: 3,105Questions: 0Answers: 538

    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_bengaliidris_bengali Posts: 18Questions: 2Answers: 1

    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.

  • colincolin Posts: 3,105Questions: 0Answers: 538

    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_bengaliidris_bengali Posts: 18Questions: 2Answers: 1

    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_bengaliidris_bengali Posts: 18Questions: 2Answers: 1

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

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

  • colincolin Posts: 3,105Questions: 0Answers: 538

    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_bengaliidris_bengali Posts: 18Questions: 2Answers: 1

    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.

  • colincolin Posts: 3,105Questions: 0Answers: 538

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

Sign In or Register to comment.