Току що разписах едно плъгинче което да показва 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});
Може да се свали от
тук
Демонстрация