无休止的数组数据分页

Question

I have a large array with over 500 entries. The structure is like that:

      Array
      (
      [result] => Array
      (
         [mounts] => Array
            (
                [0] => Array
                    (
                        [name] => Test0
                        [spellId] => 230401
                        [creatureId] => -73991
                        [itemId] => 142369
                    )

                [1] => Array
                    (
                        [name] => Test1                           
                        [spellId] => 61447
                        [creatureId] => 32213
                        [itemId] => 44234
                    )

                    .....

I get the array datas with foreach like that:

               foreach ($r['result']['mounts'] as $item) echo '
                    <li class="span3 clearfix" data-tag=', 
                    $item['qualityId'], '>
                    ', $item['name'], '.
                    </li>';
                    echo '

I want an endless paging. So when the user reaches the end of the page and scrolls down it should load the next datas.

I know there are some plugins for endless paging, but I don´t get them to work with datas out of an array. Do you have any tips for a simple solution?

Answer 1

You need to set up pagination and have a window scroll listener set up to request the next page once the user scrolls to the bottom. For example, instead of sending all of the entries, only send what would appear on that "page" if pages were set up. Then, in your js, you can set up a window scroll listener to request the next "page" when the user scrolls.

I created a jsfiddle to show the JS side of things. My addMoreElements would be replaced with however you want to set up your pagination ajax request, I'll leave that portion of it up to you.

Here's the part that truly matters from the fiddle:

var $window = $(window),
  $document = $(document);
$window.scroll(function() {
  if ($window.scrollTop() + $window.height() == $document.height()) {
    addMoreElements();
  }
});