Jquery plugin за "странициране"
Published on 17.06.2012
За един от проектите ми беше нужен плъгин който да прави странициране на ниво javascript ( знам че е супер грешен подход за решаване на проблема но това ми беше задачатa :) )
Та за 15тина минутки разписах следния код
(function($) { $.VirtualPaging = function(element, options) { var defaults = { perPage: 10, 'tablePagingPrefix':'stranicirane' }; var plugin = this; plugin.settings = {} var $element = $(element),element = element; plugin.init = function() { plugin.settings = $.extend({}, defaults, options); foo_private_method(); }; plugin.setPage = function(page){ $element.find('.'+plugin.settings.tablePagingPrefix).hide(); $element.find('.'+plugin.settings.tablePagingPrefix+'_'+page).show(); $element.find('.pager a').removeClass('paging-active'); $element.find('tfoot a[show_page='+page+']').addClass('paging-active'); }; var foo_private_method = function() { tr_elemts = $element.find('tbody tr'); if(tr_elemts.length >= plugin.settings.perPage) { broy_stranici = Math.round(tr_elemts.length / plugin.settings.perPage); if(broy_stranici < (tr_elemts.length / plugin.settings.perPage)) { broy_stranici = parseInt(broy_stranici+1); } ci = 0; page_number = 1; $.each(tr_elemts,function(i,v){ ci = parseInt(ci+1); if(ci == plugin.settings.perPage) { ci = 0;page_number = parseInt(page_number+1); } $(this).addClass(plugin.settings.tablePagingPrefix).addClass(plugin.settings.tablePagingPrefix+'_'+page_number).hide(); }); if($element.find('tfoot').length == 0) { $element.append('<tfoot></tfoot>'); }; html = '<div style="float:right" class="pager">'; for(i=1;i<=page_number;i++){ html += '<a show_page="'+i+'" onclick="$(this).parents(\'table\').first().data(\'VirtualPaging\').setPage('+i+');return false;" href="#">'+i+'</a>'; } html += '</div>'; $element.find('tfoot').append('<tr> <td style="text-align:right" colspan="'+$element.find('tr').first().find('td').length+'" >'+html+'</td> </tr>'); plugin.setPage(1); }; }; plugin.init(); }; $.fn.VirtualPaging = function(options) { return this.each(function() { if (undefined == $(this).data('VirtualPaging')) { var plugin = new $.VirtualPaging(this, options); $(this).data('VirtualPaging', plugin); } }); }; })(jQuery);
Може да се иползва така:
$('#quick_stat_here table').first().VirtualPaging({perPage:30});като за момента работи само с таблици.
пс: гледам че syntaxHightler-а не се справя много добре с кода :D та
Download/preview от https://gist.github.com/2943927