Responsive example Foundation modal

This example shows the responsive.details.display option being used with the modal option, which, when used with the Foundation integration for Responsive, will use Foundation's native modal display.

The built-in modal display option should be executed as a function with optional parameters passed in to control the behaviour of the modal display. In the case of Foundation it has only a header option which is a function that should return the title for the modal. If you do not wish to display a title, simply don't use this option.

Additionally, the responsive.details.renderer option is used here to display the full data for the row, rather than just the hidden columns (which is the default behaviour) as this looks a bit better in a modal!

The Javascript shown below is used to initialise the table shown in this example:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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()
            }
        }
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

Other examples

Basic initialisation

Display-types

Column-control

Child rows

Styling

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2016
DataTables is licensed under the MIT license.