jquery-tableoverflow.js

/**
* jquery-tableoverflow.js
* https://github.com/marcogrcr/jquery-tableoverflow
*
* License of use:
*
* 1. You may use and modify this plugin as you see fit.
* 2. Please credit the original author by preserving this header :)
*/
(function ($) {
    var
        $tables = $(),
        timeout = null;

    // Timeout-based resize event to improve performance.
    function onResize() {
        if (timeout) {
            clearTimeout(timeout);
        }

        timeout = setTimeout(resizeColumns, 200);
    }

    function resizeColumns() {
        // Clean $tables from elements removed from the DOM.
        $tables.each(function () {
            if (!$.contains(document.documentElement, this)) {
                $tables = $tables.not(this);
            }
        });

        // Resize the columns of each table.
        $tables.each(function () {
            var $table = $(this);

            // Set all columns of the table to equal width.
            // Get a map for each column with the th, col and tds elements.
            var $columns = $('colgroup col', $table)
                .css('width', '')
                .map(function (i) {
                    return {
                        $col: $(this),
                        $th: $('thead th:eq(' + i + ')', $table)
                    };
                });

            // Balance the column widths until no further balance is required.
            while ($columns.length) {
                $columns.each(function () {
                    // Get the min, max and actual width.
                    var
                        actualWidth = this.$th.outerWidth(),
                        minWidth    = this.$col.data('tableoverflow-min-width'),
                        maxWidth    = this.$col.data('tableoverflow-max-width');

                    if (actualWidth < minWidth || actualWidth > maxWidth) {
                        // Force the min or max width if necessary.
                        if (actualWidth < minWidth) {
                            this.$col.css('width', minWidth);
                        } else {
                            this.$col.css('width', maxWidth);
                        }

                        // Remove the column since it's width has been set.
                        var self = this;
                        $columns = $columns.filter(function () {
                            return this != self;
                        });
                    } else {
                        if (!this.visited) {
                            // Mark the column as visited for a unique time.
                            this.visited = true;
                        } else {
                            // Remove the column since it has been already visited once and no width has been set.
                            var self = this;
                            $columns = $columns.filter(function () {
                                return this != self;
                            });
                        }
                    }
                });
            }

            // Place or remove title attributes if truncation is present.
            $('tbody td', $table).each(function() {
                var $span = $('span', this);

                if ($span.width() > $(this).width()) {
                    $span.attr('title', $.trim($span.text()));
                }
                else {
                    $span.removeAttr('title');
                }
            });
        });
    }

    $.fn.tableoverflow = function () {
        $(this).each(function () {
            var $table = $(this);

            // Execute tableoverflow if the element is a table and has not been overflowed before.
            if ($table.has('thead') &&!$tables.is($table)) {
                var $colgroup = $('<colgroup />');

                // Set the CSS of the table.
                $table
                    .css({
                        'table-layout': 'fixed',
                        'white-space': 'nowrap'
                    })
                    .prepend($colgroup)
                    .find('thead th, tbody td').css({
                        'overflow': 'hidden',
                        'text-overflow': 'ellipsis'
                    });

                // Create a col element for each column of the table and store the min and max width as data-* attributes.
                // Min width is the length of the column header.
                // Max width is the length of the largest cell in the column.
                $('thead th', $table).each(function (i) {
                    var $th = $(this);

                    var $cells = $('tbody td:nth-child(' + (i + 1) + ')', $table).add($th);

                    $cells.filter(':not(:has(span))').wrapInner($('<span data-tableoverflow-autogenerated="true" />'));

                    // display: inline-block required on IE to get real width of span.
                    var $spans = $cells
                        .find('span')
                        .css('display', 'inline-block');

                    var widths = $spans
                        .map(function () {
                            return $(this).width();
                        })
                        .get();

                    $spans.css('display', '');

                    var padding = $th.outerWidth() - $th.width();

                    // Rounding issues on widths:
                    // + 1 required on Firefox and IE 9+.
                    // + 2 required on IE 8.
                    $('<col />').attr({
                        'data-tableoverflow-min-width': $('span', $th).width() + padding + 2,
                        'data-tableoverflow-max-width': Math.max.apply(Math, widths) + padding + 2
                    }).appendTo($colgroup);
                });

                $tables = $tables.add($table);
                resizeColumns();
            }
        });
    }

    $.tableoverflow = {};

    $.tableoverflow.removeTable = function ($table) {
        $tables.each(function () {
            // Remove the table only if it has been processed previously.
            if ($tables.is(this)) {
                // Remove the css and title attributes.
                $(this)
                    .css({
                        'table-layout': '',
                        'white-space': ''
                    })
                    .find('th, td')
                    .css({
                        'overflow': '',
                        'text-overflow': ''
                    })
                    .find('span')
                    .removeAttr('title')
                    .filter('[data-tableoverflow-autogenerated]')
                    .each(function () {
                        var $span = $(this);

                        $span.parent().html($span.html());
                    });

                // Remove the colgroup from the table.
                $('colgroup', this).remove();

                // Remove the table.
                $tables = $tables.not(this);
            }
        });
    }

    $(window).on('resize', onResize);
})(jQuery);