Adding custom field to Responsive-Details (not custom)

xkpx

Is it possible to add just one field for download button or something in Responsive details pane, without making custom wrapper.
I like to keep < ul > < li > style of original one becouse i working good with mobile
The one in example breaks alot in mobile [https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html]

xkpx

I reallize that is in the source code

Here it is if anyone need custom wrapper for mobile devices

responsive: {
                details: {
                    renderer: function ( api, rowIdx, columns ) {
                        var data = $.map( columns, function ( col, i ) {
                            return col.hidden ?
                                '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                    '<span class="dtr-title">'+
                                            col.title+
                                        '</span> '+
                                        '<span class="dtr-data">'+
                                            col.data+
                                        '</span>'+
                                        '<span class="dtr-data">Свали от тук: <a href="download.php?id='+col.data+'"><i class="fas fa-cloud-download-alt"></i></a></span>'+
                                        
                                    '</li>'  : '';
                        } ).join('');
                        return data ?
                    $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ) :
                    false;
                    }
                }
            },

xkpx

How to fix this behaviour?

kthorngren

Please provide a link to your page or a running test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Its hard to tell what problem you are trying to fi. Please provide details of your requirements.

Kevin

xkpx

Hey here is live example http://live.datatables.net/ruwutute/18/
The idea here is that i use responsive and always hide 1/2 fields from user screen becouse they are not needed on page, they are additional info for (files-upload).
So i get the idea that i can just add 1-responsive <span> field for Downloading links and Preview files without making column .

colin

You can use responsive.details.renderer to generate your own custom render - which can then display whatever fields, extra information, you want.

Colin

xkpx

@colin is there any example with only 1 custom field added to the details

xkpx

Hours later i found it
https://jsfiddle.net/3fLwej4u/
https://stackoverflow.com/questions/36619015/trying-to-show-extra-information-in-a-responsive-datatable
If anyone need responsive for mobiles

Only question is how to catch id of row or data-name and output in custom field ?

responsive: {
                details: {
                    renderer: function ( api, rowIdx, columns  ) { 
                        var data = $.map( columns, function ( col, i ) {
                            return col.hidden ? 
                                '<li data-dtr-index="'+col.columnIndex+'" data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                                    '<span class="dtr-title">'+col.title+'</span> '+
                                    '<span class="dtr-data">'+col.data+'</span>'+ 
                                '</li>' : ''; 
                        } ).join('');
                        //return data ? $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ) : false;
                        //data += '<tr><td>Name:</td><td>' + api.cell(rowIdx, 0).data() + '</td></tr>';
                        //data = $('<table width="100%"/>').append( data ).prop('outerHTML');
                        data = $('<ul data-dtr-index="'+rowIdx+'" class="dtr-details"/>').append( data ).prop('outerHTML');
                        data += '<div class="row"><div class="col-auto">Download: xxx</div><div class="col-auto">Preview: xxx</div></div>';
                        return data;
                    }
                }
            },

xkpx

To the question how to catch data and pass to custom field here it is.

var rowData = dTable.row( this ).data();
data += '<div class="row"><div class="col-auto">Download: '+rowData.name+'</div><div class="col-auto">Preview: xxx</div></div>';

ryanqfeeney

@xkpx This is excellent however when the table is fully extended with wise, the plus button doesn't appear for the the Custom content div to appear. How did you get around this?

colin

@ryanqfeeney We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin