Is there no option to have a column displayed only in the responsive child row ?

Is there no option to have a column displayed only in the responsive child row ?

yericusyericus Posts: 20Questions: 4Answers: 1

Hello again,

So I was looking to only have certain data appear in the responsive chid row but could not see any option for that ?
Visible: false will hide the data totally.

I only found some references to assign a render function to the responsive options but that seems daunting.
Did I miss anything ?

This question has accepted answers - jump to:

Answers

  • yericusyericus Posts: 20Questions: 4Answers: 1
    edited November 2020

    Well, I tried again the example showed by Colin here :

    https://datatables.net/forums/discussion/55931/responsive-how-to-get-rendered-data-in-details-child-row

    The code provided is giving me some basis to see what is possible so I will try that :

    'responsive': {
        'details': {
            'renderer':
            function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden ? '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' + '<td><i>data from hidden column: ' + col.columnIndex + '</i><br><b>' + col.title + ':' + '</b></td> ' + '<td>' + table.cell(rowIdx, i).render('display') + '</td>' + '</tr>' : '';
                }).join('');
                 
                return data ? $('<table/>').append( data ) : false;
            }
        }
    }
    
  • yericusyericus Posts: 20Questions: 4Answers: 1
    edited November 2020

    Argh but I declared all my targets with classes which kinda breaks this all, nom nom !

  • colincolin Posts: 15,146Questions: 1Answers: 2,586
    Answer ✓

    column.visible() would be the way to go, then have your own renderer as you are above. Did you get it going? If not, please create a test with what you've got so far, and we can take a nose,

    Colin

  • yericusyericus Posts: 20Questions: 4Answers: 1
    edited November 2020

    Annnd the solution was ...

    Use the class noneeither in the th class declaration or in the columnDefs className attribute.

    Column will only be displayed in child.

    This as supposed to be posted yesterday but just see now it has not been.
    Ahah now I am wondering how not to display rows removed by responsive in the child and render a custom child !
    Must be somewhere, but i call it a day for now ...

    I have been working with datatables since monday to switch my data source to json which I never used before and rebuild everything, trying to understand datatables (compared to just 'it works' last time a year something ago.)

    And wow, this made me learn a lot which is very very useful when I want to switch my small developments to js and modern ajax stuff.

    Very cool tool, thank you, documentation could be better maybe and there is a lot of outdated information around too, but it's very satisfying to finally reach a satisfying result.

  • tangerinetangerine Posts: 3,350Questions: 37Answers: 394
    Answer ✓

    documentation could be better maybe and there is a lot of outdated information around too

    Providing examples would be helpful.

  • yericusyericus Posts: 20Questions: 4Answers: 1
    edited November 2020

    Sorry I did not provide an example, it seemed like a very generic question about having a declared column only appear in the responsive child, and i was totally over my head switching form inline html to a json source.

    Please do not take it badly for me to write about my experience with the documentation and the information found on the forum.

    It took me a while to realize the best introduction was the examples to get a grip on things.
    And the forum are very rich and have a long timeline which gets overwhelming when you are a bit lost is all.

  • yericusyericus Posts: 20Questions: 4Answers: 1

    http://live.datatables.net/poyecexo/3/edit?html,js,output

    In this example the column position, given the columndefs attribute className: 'none', is only visible in the responsive child.

  • kthorngrenkthorngren Posts: 20,309Questions: 26Answers: 4,770

    When tangerine mentioned providing examples he meant with the documentation. The developers are interested in improving the docs and if you provide specific examples they will make the appropriate improvements.

    Do you need further help with the test case you posted?

    Kevin

This discussion has been closed.