Переменная self, используемая в методах, использовалась по-разному - где-то была сделана локальная переменная (var self = this в методе), а в других местах она использовалась как переменная со временем жизни вне метода (опуская var).Я не знаю, было ли это намеренно, чтобы получить какой-то другой эффект, но локальная переменная устранила проблему подкачки только с последним элементом.
Обновленный код на http://jsbin.com/itajow/11/edit
Примечание: объявление addNav:function(self) принимает объект self, но он вызывается как с параметром в коде, так и без него, поэтому первая строка функции исправляет это, выполняя self = self || this.
Редактировать Чтобы фильтрация списка работала, привязка события может быть переписана следующим образом:
self.$elem.find(".beautableFilter").on("keyup", function() {
var input = $(this).val(); //this == the input element
self.addFiltrado(input);
});
, а метод addFilterado должен принимать input в качестве параметра, а не находить его сам.
(код, чтобы сохранить его здесь на SO)
// JavaScript Document
// requiere pubsub!!
// requiere contains insensitive!!
jQuery.expr[":"].contains=function(a,i,m) {
return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0;
};
(function(a) { var b=a({});a.subscribe=function() { b.on.apply(b,arguments); },a.unsubscribe=function() { b.off.apply(b,arguments); },a.publish=function() { b.trigger.apply(b,arguments); } })(jQuery);
if(typeof Object.create!=='function') {
Object.create=function(obj) {
function F() { }
F.prototype=obj;
return new F();
};
}
(function($,window,document,undefined) {
var Beautable={
init: function(options,elem) {
var self=this;
self.elem=elem;
self.$elem=$(elem);
self.$elem.addClass("beautable");
self.ncols=self.$elem.find("th").size();
self.nrows=self.$elem.find("tr").size()-1;
if(options===undefined) {
options={};
}
self.options=$.extend({},$.fn.beautable.options,options);
self.subscribeTo();
self.addFooter();
if(self.options.filtro) { self.addHeader(); }
self.addData();
if(self.options.multicheck) { self.multicheckFn(); }
if(self.options.showTotal) { self.showTotal(); }
if(self.options.maxRows>0) { self.addNav(); }
self.bindEvents();
//self.hideRows(3,4);
},
subscribeTo: function() {
//$.subscribe('twitter.getTweets', Twitter.cleanTweets);
//$.subscribe('twitter.gotTweets', Twitter.attachTemplate);
},
bindEvents: function() {
var self=this;
if(self.options.multicheck) {
self.$checkPadre.on("click",function() {
self.multicheckEvent();
});
}
if(self.options.maxRows>0&&self.nrows>self.options.maxRows) {
self.$elem.find(".beautableButton").on("click",function() {
self.buttonClicked($(this));
});
}
if(self.options.filtro) {
self.$elem.find(".beautableFilter").on("keyup", function() {
var input = $(this).val(); //this == the input element
self.addFiltrado(input);
});
}
},
multicheckFn: function() {
var self=this;
self.$checks=self.$elem.find("input[type='checkbox']");
self.$checkPadre=self.$checks.eq(0);
self.$checkPadre.attr("checked",false);
},
multicheckEvent: function() {
var self=this;
self.$checks.attr("checked",self.$checkPadre.is(':checked'));
},
showTotal: function() {
var self=this;
self.$elem.find("tfoot tr td").append('<div class="floatedl">Total: '+self.nrows+' filas</div>');
},
addFooter: function() {
var self=this;
self.$elem.find("tbody").after('<tfoot><tr><td colspan="'+self.ncols+'"> </td></tr></tfoot>');
},
addHeader: function() {
var self=this;
self.$elem.find("thead").prepend('<tr><th colspan="'+self.ncols+'"><div class="floatedr"><input type="text" placeholder="Filtrar..." class="beautableFilter"></div></th></tr></tfoot>');
},
addData: function() {
var self=this;
nrowsdata=0;
$.each(self.$elem.find("tbody tr"),function() {
$(this).data("nrow",++nrowsdata);
});
},
buttonClicked: function($bt) {
var self=this;
page=$bt.data("page");
maxp=self.options.maxRows*page;
minp=maxp-self.options.maxRows+1;
self.hideRows(minp,maxp);
self.$elem.find(".beautableButton").removeClass("selected");
$bt.addClass("selected");
},
hideRows: function(minR,maxR) {
var self=this;
$.each(self.$elem.find("tbody tr"),function() {
if($(this).data("nrow")<minR||$(this).data("nrow")>maxR) { $(this).hide(); } else { $(this).show(); }
});
},
addNav: function(self) {
self=self||this;
if(self.nrows>self.options.maxRows) {
self.npages=Math.ceil(self.nrows/self.options.maxRows);
self.$elem.find(".navi").remove();
buttons="";
for(i=1;i<=self.npages;i++) {
buttons+="<div class='beautableButton' data-page="+i+">"+i+"</div>";
}
self.$elem.find("tfoot td").append('<div class="floatedr navi">'+buttons+'</div>');
self.buttonClicked($(".beautableButton").eq(0));
}
},
addFiltrado: function(input) {
var self=this;
clearTimeout(self.timer);
if(input.length>0) {
self.timer=setTimeout(function() {
self.filtrar(input);
},100);
self.$elem.find("tfoot .navi").hide();
} else {
self.$elem.find("tfoot .navi").show();
self.filtrar(input);
self.addNav(self);
}
},
filtrar: function(busqueda) {
self=this;
self.$elem.find("tbody tr").hide();
self.$elem.find('tbody tr td:contains("'+busqueda+'")').filter(function() { $(this).parent().show(); });
}
};
$.fn.beautable=function(options) {
return this.each(function() {
var beautable=Object.create(Beautable);
beautable.init(options,this);
});
};
$.fn.beautable.options={
multicheck: true,
showTotal: false,
sumatorio: "",
paginated: false,
maxRows: 0,
filtro: false
};
})(jQuery,window,document);