Ugh ... large tables always needs lots of optimizations. First ...
you'll want to minimize the number of .append()s. Concat all your HTML
into an array and then append. Something like this:
var html = [];
for (var i in data) {
// generate your html like this
html.push('<tr><td>blah</td></tr>');
}
// once the loop is done ... make the array into one long string and
append
$('#eintragsliste').append( html.join('') );
Next, you are calling LiveQuery every time you append. That defeats
the purpose of LiveQuery. Call LiveQuery once and it matches all new
elements for you. None-the-less... When dealing with events on large
tables my suggestion is to use event delegation. This is primarily to
keep the number of event handlers to a minimum as having lots can
cause issues of their own. Here is a new plugin that handles event
delegation rather elegantly:
http://dev.jquery.com/browser/trunk/plugins/delegate/jquery.delegate.js
You'd need to use it like this:
$('#eintragsliste')
.delegate('click', '.expanding', collapser_expand_all)
.delegate('click', '.collapsing', collapser_collapse_all);
If you wanted to still use LiveQuery you can use the following:
$('.expanding', '#eintragsliste').livequery('click',
collapser_expand_all);
$('.collapsing', '#eintragsliste').livequery('click',
collapser_collapse_all);
But remember to put whichever method you use (delegate or livequery)
outside the loop and use these methods for their strengths. And
remember ... optimize, optimize and optimize some more when dealing
with large tables.
--
Brandon Aaron
On Feb 2, 11:06 am, wyo <[EMAIL PROTECTED]> wrote:
> On Feb 2, 5:06 pm, "Glen Lipka" <[EMAIL PROTECTED]>
> wrote:>http://brandonaaron.net/docs/livequery/
> > This will do the trick.
>
> Perfect.
>
> Yet if I rework the sample to bind each image separate, the script
> takes for ages and the browser complains about stopping the script.
>
> for (var i in data) {
> $('#eintragsliste').append(
> '<tr><td><table id="'+i+'"><tbody>' +
> ' <tr>' +
> ' <td><img class="expanding" src="images/plus01.png"></
> th>' +
> ' <td>...</td>' +
> ' </tr><tr class="expanded">' +
> ' <td> </td>' +
> ' <td>...</td>' +
> ' </tr>' +
> '</tbody></table></td></tr>');
> $('.expanding, id=#'+i+).bind('click', collapser_expand);
> }
>
> Is this because of my code or livequery? any idea how to solve it?
>
> Seehttp://www.orpatec.ch/termola/index.php?page=orgslist.php
>
> O. Wyss
