Adding custom field to Responsive-Details (not custom)

Adding custom field to Responsive-Details (not custom)

xkpxxkpx Posts: 27Questions: 5Answers: 0
edited April 2021 in DataTables 1.10

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]

Answers

  • xkpxxkpx Posts: 27Questions: 5Answers: 0

    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;
                        }
                    }
                },
    
  • xkpxxkpx Posts: 27Questions: 5Answers: 0


    How to fix this behaviour?

  • kthorngrenkthorngren Posts: 21,262Questions: 26Answers: 4,934

    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

  • xkpxxkpx Posts: 27Questions: 5Answers: 0

    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 .

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

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

    Colin

  • xkpxxkpx Posts: 27Questions: 5Answers: 0

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

  • xkpxxkpx Posts: 27Questions: 5Answers: 0
    edited April 2021

    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;
                        }
                    }
                },
    
  • xkpxxkpx Posts: 27Questions: 5Answers: 0

    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>';
    
  • ryanqfeeneyryanqfeeney Posts: 1Questions: 0Answers: 0

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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    @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

Sign In or Register to comment.