[jQuery] expand table

Току що разписах едно плъгинче което да показва 1вите X редове от таблицата а останалите ги скрива под бутонче "всички резултати".

(function($) {
    $.jTable = function(element, options) {
        var defaults = {
            max: '10',
            append: true,
            more_text: 'останали резултати',
            expand_class: '_expand_me_',
            expand_css: 'cursor:pointer;',
            onExpand: function() {}
        };
        var plugin = this;
        plugin.settings = {};
        var $element = $(element),
            element = element;
        
        plugin.init = function() {
            plugin.settings = $.extend({}, defaults, options);
            b = $element.find('tbody');
            trs = b.find('tr');
            broy = trs.length;
            tds = trs.first().find('td').length;
            $.each(trs, function(i, v) {
                if (plugin.settings.max <= i) $(this).hide();
            });
            if (plugin.settings.max <= broy && plugin.settings.append == true) {
                b.append(' ' + plugin.settings.more_text + ' (' + parseInt(broy - plugin.settings.max) + ')  ');
            }
        };
        
        plugin.show_hidded = function() {
            plugin.settings.onExpand();
            $element.find('tbody').find('tr').show();
            $element.find('.' + plugin.settings.expand_class).remove();
        };
        
        plugin.init();
    };
    
    $.fn.jTable = function(options) {
        return this.each(function() {
            if (undefined == $(this).data('jTable')) {
                var plugin = new $.jTable(this, options);
                $(this).data('jTable', plugin);
            }
        });
    };
})(jQuery);

Използва се по следния начин:

jQuery('.table_to_show').jTable({
    max: 10
});

Може да се свали от тук
Демонстрация

← Back to all posts