KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

Datatable responsive syntax #1388

Open branden opened this topic on on Apr 15, 2020 - 3 comments

branden commented on Apr 15, 2020

Hi,

Please advise me as to how i can convert this syntax into the datatable options for responsiveness. $(document).ready(function() {

$('#example').DataTable( {
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.modal( {
                header: function ( row ) {
                    var data = row.data();
                    return 'Details for '+data[0]+' '+data[1];
                }
            } ),
            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                tableClass: 'table'
            } )
        }
    }
} );

} );

I'm trying to display the extra rows via a modal. The default option of setting responsive => true works fine.

Thanks

David Winterburn commented on Apr 16, 2020

Hi Branden,

Please try this:

DataTables::create(array(
    ...
    "options" => array(
        "responsive" => array(
            "details" => "function() { 
                return $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ) 
            }()",
            "renderer": "function() { 
                return $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                } )
            }()",
        )
    )         
));

Let us know if it works for you. Thanks!

branden commented on Apr 16, 2020

TypeError: f.display is not a function KoolReport.js:106

That's the error i'm receiving.

I've also tried adding the external files but it doesn't seem to work.

David Winterburn commented on Apr 16, 2020

Hi Branden,

Please remove the return and keep the $ command only like this:

DataTables::create(array(
    ...
    "options" => array(
        "responsive" => array(
            "details" => "function() { 
                $.fn.dataTable.Responsive.display.modal( {
                    header: function ( row ) {
                        var data = row.data();
                        return 'Details for '+data[0]+' '+data[1];
                    }
                } ) 
            }()",
            "renderer" => "function() { 
                $.fn.dataTable.Responsive.renderer.tableAll( {
                    tableClass: 'table'
                } )
            }()",
        )
    )         
)); 

Hope this helps. Thanks!

Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
help needed

DataGrid