[jQuery] expand table
Published on 13.02.2012
Току що разписах едно плъгинче което да показва 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('<tr style="'+plugin.settings.expand_css+'" class="'+plugin.settings.expand_class+'" onclick="$(this).parents(\'table\').data(\'jTable\').show_hidded();return false;" > <td colspan="'+tds+'">'+plugin.settings.more_text+' ('+ parseInt(broy - plugin.settings.max ) +') </td> </tr>'); } }; 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});
Може да се свали от тук
Демонстрация