Adding custom field to Responsive-Details (not custom)

Adding custom field to Responsive-Details (not custom)

xkpxxkpx Posts: 27Questions: 5Answers: 0
edited April 25 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: 14,129Questions: 25Answers: 3,331

    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: 12,911Questions: 0Answers: 2,200

    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 26

    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>';
    
Sign In or Register to comment.