CODEWITHSUNDEEP
jquerypagination
Norse
Norse

Reputation: 5757

Jquery Pagination - handling the non visible pages

My question is, what is the best way to handle non-visible pages?

$('.results').slice('//hidden pages').hide();
$('.results').slice('//current page').show();

<?php
while ($row = mysql_fetch_assoc($query)) {
   echo '<span class="results">' . $row['items'] . "</span><br/>";
}
?>

Currently I use $.hide() which works just fine -- until the query returns thousands of rows of data (about 9000 to be precise.) If a query has too many results it seems to lag/crash firefox. Is hide/show the wrong way to go about this? I've been looking at Jquery $.detach but am not sure if that would even solve this issue.

Is this something that should be handled in PHP instead?

Upvotes: 2

Views: 369

Answers (3)

davidbuzatto
davidbuzatto

Reputation: 9424

Why don't you load the values dynamically using AJAX? I think that the approach that you chose is consuming too much memory, because it is generating too many nodes in the DOM, making Firefox crash.

Upvotes: 1

Bill Yang
Bill Yang

Reputation: 1413

The main reason it is slow is due to the fact you are operating on 9000 x n DOM elements.

One way to avoid that is to store the result in a javascript array, and only render items in current page.

This is doable, but somewhat tedious with jQuery, and would be much easier to do with the help of some other javascript libraries like knockout.

Here is a sample implementation using knockout: http://jsfiddle.net/6bgCX/7/

Edit: added sample code

Upvotes: 1

Travis J
Travis J

Reputation: 82267

Client side can only handle so much. If you want to see an example, try to handle 10,000,000 bytes of the letter a (not suggested to actually run this):

    var a = "a";
    var z = 100000000;
    for (var i = 0; i < z; i++) {
        a += "a";
    }

Usually what is done with pagination is that the current page is loaded on demand. Pages which are not in play are then released.

I would suggest attaching an ajax event to the navigation of the pages:

<div id="myTag"></div>
<div class="PageNumbers" data-page-number="1">1</div>
<script type="text/javascript">
              $(".PageNumbers").click(function () {
                 $.ajax({
                    url: "/Page/",
                    type: 'GET',
                    data: { page: $(this).attr("data-page-number")},
                    success: function (result) {
                        $("#myTag").html(result);
                     }
                });
              });
</script>

Moreover, the largest part of the page which would be desired for retention would be the images. Storing them as they are encountered in an array can greatly reduce the reloading of "discovered" content.

Upvotes: 1

Related Questions