Datatable responsive syntax

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!

KoolReport's Forum

Datatable responsive syntax #1388

Build Your Excellent Data Report