How to display a different number of paragraphs?

Oh ... Schas.

I'm here a little plugin in a hurry .... it can be useful. In any case, without glitches, it turns more than 10,000,000 elements :)

(function(jQuery){ jQuery.fn.createVirtualTable = function(options){ var opt = jQuery.extend({ remark: 4, objects: null, count: 10, search: 0, objname: null, width: "485px" },options); var tmp = { mid: null, objects: null } var create = function(data , pos, id) { var str = ""; var count = opt.count; if (!data) data = opt.objects; if (!pos) pos = 0; if (!id) id=""; for (var i = pos; data.length > i; i++) { if (count && i >= (count + pos)) break; var elem = data[i]; if(!elem) continue; if (!id && elem.init) var tmpid = elem.init + "&"; else var tmpid = id + i + "&"; str += "<" + elem.type; if (elem.attr) { for (key in elem.attr) { if ( elem.attr[key] ) str += " " + key + "='" + elem.attr[key] + "'"; } } if ( elem.type == "input" ) { str += " init='" + tmpid + "' /> "; continue; } str += " init='" + tmpid + "' > "; if(elem.html) str += elem.html; if (elem.child) str += create(elem.child, '',tmpid); str += " </" + elem.type + ">"; } return str; } var srchTpl = function (text, template) { var pattern = template.toLowerCase(); pattern = pattern.replace(/\\/g, "\\\\"); pattern = pattern.replace(/\./g, "\\."); pattern = pattern.replace(/\?/g, "."); pattern = pattern.replace(/\*/g, ".*"); pattern = pattern.replace(/\^/g, "\\^"); pattern = pattern.replace(/\$/g, "\\$"); pattern = pattern.replace(/\+/g, "\\+"); pattern = pattern.replace(/\(/g, "\\("); pattern = pattern.replace(/\)/g, "\\)"); pattern = pattern.replace(/\[/g, "\\["); pattern = pattern.replace(/\]/g, "\\]"); pattern = pattern.replace(/\{/g, "\\{"); pattern = pattern.replace(/\}/g, "\\}"); return text.toLowerCase().match(new RegExp('^' + pattern + '$')); } var find = function (search, e) { tmp.objects = null; var mid = e[0].id; if(!search) { build('',jQuery("#" + mid),opt.objects); return; } if(search.indexOf("*") < 0 && search.indexOf("?") < 0) var search = "*" + search + "*"; var search = search; var arr = []; var c = 0; for (var i = 0; i < opt.objects.length ; i++) { var str = opt.objects[i].index.toLowerCase(); var test = srchTpl(str ,search); if (test != null) { arr[c] = opt.objects[i]; c++; } } if(arr.length == 0 ) tmp.objects = "."; else tmp.objects = arr; build('',jQuery("#" + mid), tmp.objects); } var build = function (y,el,data) { var wh = opt.objects.length; if (!y) var y = jQuery("#" + el[0].id + "-visible").scrollTop(); if (y > 2) { var y = Math.round(y / opt.remark); } if (y >= ((wh - opt.count))) { var y = wh - opt.count; if(y < 1) var y = 0; } el.css({top : (y * opt.remark)}); if(!data) el.html(create(null, y)); else if (data == ".") el.html(" "); else set_html(el[0].id,data,y); } var reinit = function (e) { var el = jQuery(e); var n = el.attr("init").split("&"); var obj = opt.objects; var tmp = ""; var tmp2 = ""; for (var i=0; i < n.length; i++ ) { if(!n) continue; if(!n[i]) break; if (i == 0) { obj = obj[n[i]]; tmp += "[" + n[i] + "]"; tmp2 += tmp; } else { obj = obj.child[n[i]]; tmp += ".child[" + n[i] + "]"; if((n.length -1) > i) tmp2 += ".child"; } } if (e.type == "checkbox") { if(e.checked) eval("opt.objects" + tmp + ".attr.checked = 1"); else eval("opt.objects" + tmp + ".attr.checked = 0"); } if (e.type == "text") eval("opt.objects" + tmp + ".attr.value = '"+e.value + "'"); if (e.type == "radio") { if (e.checked) { var broth = obj.broth; var broth = broth.split(","); eval("opt.objects" + tmp + ".attr.checked = 1"); for (var i = 0 ; broth.length > i; i++) eval("opt.objects" + tmp2 + "[" + broth[i] + "].attr.checked = ''"); } } if(opt.objects.length) eval(opt.objname + "= opt.objects;"); } var set_html = function (eid,data, y) { var wh = opt.objects.length; var html = null; if (tmp.objects != null) var wh = tmp.objects.length; if (data && data != undefined) { jQuery("#" + eid + "-unvisible").css({ height: Math.round(data.length * opt.remark) }); if((y - opt.count) < opt.count) var html = create(data, y); else var html = create(data, (y - opt.count)); if(html) jQuery("#" + eid).html(html); else { jQuery("#" + eid).html( " " ).css({ top: 0 }); build(null, jQuery("#" + eid), data); if (jQuery.browser.opera) jQuery("#" + eid + "-visible").scrollTop(jQuery("#" + eid).css("top")); return; } } else jQuery("#" + eid).html(create(opt.objects)); jQuery("#" + eid).css({ position : "relative" }); jQuery("#" + eid + "-visible").css({ position : "relative", height: jQuery("#" + eid).height(), "overflow" : "auto" }); if(!data) { var uh = Math.round(jQuery("#" + eid + "-visible").height()); if(wh> opt.count) var uh = wh * opt.remark; jQuery("#" + eid + "-unvisible").css({ position : "relative", height: uh }); } } return this.each(function() { if (opt.objname == null || opt.objects == null) return; jQuery(this).wrap("<div id='" + this.id + "-visible' style='margin-top: 10px; border-top: 1px solid #B4B4B4; owerflov-y: true';>"); jQuery(this).wrap("<div id='" + this.id + "-unvisible'>"); if(opt.search) { var main_id = this.id; jQuery("#" + this.id + "-visible").before("<div id='" + this.id+ "-search' style='margin-top: \"10px\"; border-top:\" 1px solid #B4B4B4\"' >" + opt.search + ": <input type='text' id='" +this.id + "-search-input' style='margin-top: 10px;' value='' /></div>" ); jQuery("#" + this.id + "-search-input").keyup(function () { find(this.value, jQuery("#" + main_id)); }); } set_html(this.id); jQuery("#" + this.id + "-visible").scroll(function() { if (tmp.objects) { build(jQuery(this).scrollTop(),jQuery(this).children().children(),tmp.objects); } else { build(jQuery(this).scrollTop(),jQuery(this).children().children()); } }); var wdth = jQuery("#" + this.id).width(); jQuery("#" + this.id + "-visible").css({width: wdth + 'px'}); jQuery(this).click(function(event) { if(jQuery(event.target)[0].type == "text"){ jQuery(jQuery(event.target)[0]).keyup(function () { reinit(jQuery(event.target)[0]); }); } else if (jQuery(event.target)[0].type == "checkbox" || jQuery(event.target)[0].type == "radio") reinit(jQuery(event.target)[0]); }); }); }; })(jQuery) 

And a new function (for taking changes):

 var jQueryVirtual = { constructor: null, get_params: function (option, dom , attr) { if (!dom) return false; var str = ""; var txt = ""; for (var i = 0; dom.length > i; i++) { var elem = dom[i]; if ( elem.type.toLowerCase() == "input" ) { if (elem.attr) { for (var key in elem.attr) { if ( key == "val" || key == "value" && elem.attr[key] != "") { if (option && elem.attr.type == option) { if (option == "radio"|| option == "checkbox" && elem.attr.checked) { if(attr && !elem.attr[attr]) continue; str += "," + elem.attr.val; } } if (elem.attr.type == "text") { if (elem.attr.value != undefined ) { str += "_" + elem.attr.value; } } } } } } if (elem.child && attr) { str += this.get_params(option ,elem.child, attr); } else if (elem.child && !attr) { str += this.get_params(option ,elem.child, null); } } return str; } }; 

Example of use:

Create an array of objects from elements that are supposed to be displayed on the page:

 html_arr[j] = { type:"tr", index: name, attr: { val: "value", is_unit: "0" ,style: "width: 10px; height: 20px" }, child: [{type: "td", attr: { colspan: 1,style: "margin-right: 20px;"}, child:[{ type: "input", attr: { id: "myid"+j, type:"checkbox", val:id , checked: "1"} }] }] }; 

And connect the plugin:

 jQuery("#id-element").createVirtualTable({ objects: html_arr, //Сам массив objname: ' html_arr', //Название массива search: "Поиск", //Этот параметр нужен если нужно окошко поиска remark: 24 //Это лучше не менять. Ремарка высоты анвизибл дива (для регулятора скрола) }); 

Sorry for a lot of text :))

PS Plugin is raw but working :)) If someone has comments - I will be glad to hear them :)