Subversion-Projekte lars-tiefland.faltradxxs.de

Revision

Blame | Letzte Änderung | Log anzeigen | RSS feed

/*! PageResize for DataTables v1.0.0
 * 2014 SpryMedia Ltd - datatables.net/license
 */

/**
 * @summary     PageResize
 * @description Automatically alter the DataTables page length to fit the table
     into a container
 * @version     1.0.0
 * @file        dataTables.pageResize.js
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 * @copyright   Copyright 2015 SpryMedia Ltd.
 * 
 * License      MIT - http://datatables.net/license/mit
 *
 * This feature plug-in for DataTables will automatically change the DataTables
 * page length in order to fit inside its container. This can be particularly
 * useful for control panels and other interfaces which resize dynamically with
 * the user's browser window instead of scrolling.
 *
 * Page resizing in DataTables can be enabled by using any one of the following
 * options:
 *
 * * Adding the class `pageResize` to the HTML table
 * * Setting the `pageResize` parameter in the DataTables initialisation to
 *   be true - i.e. `pageResize: true`
 * * Setting the `pageResize` parameter to be true in the DataTables
 *   defaults (thus causing all tables to have this feature) - i.e.
 *   `$.fn.dataTable.defaults.pageResize = true`.
 * * Creating a new instance: `new $.fn.dataTable.PageResize( table );` where
 *   `table` is a DataTable's API instance.
 *
 * For more detailed information please see:
 *     http://datatables.net/blog/
 */

(function($){

var PageResize = function ( dt )
{
        var table = dt.table();

        this.s = {
                dt:        dt,
                host:      $(table.container()).parent(),
                header:    $(table.header()),
                footer:    $(table.footer()),
                body:      $(table.body()),
                container: $(table.container()),
                table:     $(table.node())
        };

        var host = this.s.host;
        if ( host.css('position') === 'static' ) {
                host.css( 'position', 'relative' );
        }

        this._attach();
        this._size();
}

PageResize.prototype = {
        _size: function ()
        {
                var settings = this.s;
                var dt = settings.dt;
                var t = dt.table();
                var offsetTop = $( settings.table ).offset().top;
                var rowHeight = $( 'tr', settings.body ).eq(0).height();
                var availableHeight = settings.host.height();

                // Subtract the height of the header, footer and the elements
                // surrounding the table
                availableHeight -= settings.header.height();
                availableHeight -= settings.footer.height();
                availableHeight -= offsetTop;
                availableHeight -= settings.container.height() - ( offsetTop + settings.table.height() );

                var drawRows = Math.floor( availableHeight / rowHeight );

                if ( drawRows !== dt.page.len() ) {
                        dt.page.len( drawRows ).draw();
                }
        },

        _attach: function () {
                // There is no `resize` event for elements, so to trigger this effect,
                // create an empty HTML document using an <object> which will issue a
                // resize event inside itself when the document resizes. Since it is
                // 100% x 100% that will occur whenever the host element is resized.
                var that = this;
                var obj = $('<object/>')
                        .css( {
                                position: 'absolute',
                                top: 0,
                                left: 0,
                                height: '100%',
                                width: '100%',
                                zIndex: -1
                        } )
                        .attr( 'type', 'text/html' )
                        .attr( 'data', 'about:blank' );

                obj[0].onload = function () {
                        var body = this.contentDocument.body;
                        var height = body.offsetHeight;

                        this.contentDocument.defaultView.onresize = function () {
                                var newHeight = body.offsetHeight;

                                if ( newHeight !== height ) {
                                        height = newHeight;

                                        that._size();
                                }
                        }
                };

                obj.appendTo( this.s.host );
        }
};


$.fn.dataTable.PageResize = PageResize;
$.fn.DataTable.PageResize = PageResize;

// Automatic initialisation listener
$(document).on( 'init.dt', function ( e, settings ) {
        var api = new $.fn.dataTable.Api( settings );

        if ( $( api.table().node() ).hasClass( 'pageResize' ) ||
                 settings.oInit.pageResize ||
                 $.fn.dataTable.defaults.pageResize )
        {
                new PageResize( api );
        }
} );

}(jQuery));