jQuery Plugin To Create Infinitely Scrolling List View - one-more-list

one-more-list is a simple, lightweight jQuery plugin for creating an AJAX enabled, infinite-scrolling listview that automatically (or manually) loads more list items as you reach the top or bottom of the container.

How to use it:

1. Load jQuery library and the jQuery one-more-list plugin right before the closing body tag.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.one-more-list.js"></script>

2. Create a DIV element for the list view.

<div class="infinite-list"></div>

3. Call the function on the list view and specify the data source you want to retrieve new items.

$('.infinite-list').list({
  storage: {
    type: 'net',
    url: '/api/',
    lastId: 99,
    getLastId: function(html) {
        return $(html).find('.list-item').last().attr('data-item-id');
    }
  }
});

4. Specify the scrolling position to trigger the infinite scroll.

$('.infinite-list').list({
  storage: {
    type: 'net',
    url: '/api/',
    lastId: 99,
    getLastId: function(html) {
        return $(html).find('.list-item').last().attr('data-item-id');
    }
  }
  direction: 'topDown', // or bottomUp
});

5. Apply your own CSS styles to the list view.

.infinite-list {
  width: 400px;
  height: 600px;
  background: #445599;
  overflow-y: auto;
  color: #fff;
}

.infinite-list_item { background: #995544; }

.infinite-list_item + .infinite-list_item { margin-top: 10px; }

.infinite-list.__fetching::after {
  content: 'loading more data';
  display: block;
  background: red;
}

6. API methods.

// append a new item to the list view
$('.infinite-list').list('appendItem', $('div').text('my new item'));

// show more items
$('.infinite-list').list('showMore');

// remove an item
$('.infinite-list').list('removeItem', $('.infinite-list .infinite-list_item[data-id="myId"]'));

---

This awesome jQuery plugin is developed by Va1tra. For more Advanced Usages, please check the demo page or visit the official website.