Databases
StackOverflow2013
Postsdbo
POJQM: how to render a nested listview of 100 items in a reasonable time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQM: how to render a nested listview of 100 items in a reasonable time
    text
    copied!<p>I need to display a nested listview with at most 100-120 items, each one with an average of 4 sub-items, using JQM. This is the relevant code I use (data comes from a getJSON() call):</p> <pre class="lang-js prettyprint-override"><code>var groups = []; $.each(data, function(i, group) { groups.push("&lt;div data-role='collapsible' data-collapsed='true'&gt;&lt;h3 class='group-title'&gt;" + group.group + "&lt;/h3&gt;"); $.each(group.items, function(j, item) { groups.push("&lt;li class='news-item'&gt;&lt;a href='http://exaple.com'&gt;" + item.des + "&lt;/a&gt;&lt;/li&gt;"); }); groups.push("&lt;/div&gt;"); }); $('&lt;ul/&gt;', { 'html': groups.join('\n'), }). attr("id", "list"). appendTo("#content"); $("#list").trigger('create'); </code></pre> <p>On my not-so-low-end Android mobile, on a wifi connection, it takes 56 seconds to render!!!</p> <p>I am rendering it dynamically; the rendered paged saved as a static html file (you can check it <a href="http://www.resistenze.org/mobile.wip/staticlist.html" rel="nofollow">here</a>) does render in 22 seconds (which is not an option, and however it's still a lot of time...).</p> <p>Since <a href="http://jquerymobile.com/blog/2011/06/14/jquery-mobile-update-week-of-june-13/" rel="nofollow">JQM has discussed about deprecating nested listviews</a>, I'm thinking to drop them, too.</p> <p>Which approach would you suggest to replace them? In the just referred discussion they suggest that "the same effect can be achieved [...] with our standard page model", but I find it quite generic: have you any more specific suggestion / example?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload