CODEWITHSUNDEEP
jqueryjquery-mobile
Kagawa
Kagawa

Reputation: 1359

jQuery Mobile listview paging

What is the effective way to deal with long list in jQuery Mobile listview? Take 1000 items for example, showing 1000 items all at once would effectively render it useless to user. Just imagine scrolling such a long list.

I'm thinking of implementing custom paging for listview, is there better approach other than rolling my own paging solution?

**UPDATE Please check my updated answer with Fiddle example below

Upvotes: 3

Views: 21061

Answers (2)

Kagawa
Kagawa

Reputation: 1359

OK, I've decided to make my own lazy-loading listview plugin. And it turned out really great user-experience!

Just a tip for those still looking for solution of long scrolling list.

--UPDATE

I've to say sorry that I didn't have time to post an example earlier, as I'm not allowed to post the source code we used onto the Internet. Now that finally I'm free and decided to spent a few hours to rebuild the lazy-loading listview (freshly out of my head).

SCRIPT:

var per_page = 20; //max images per page
var page = 1; //initialize page number
$(document).ready(function () {
    loadFlckr(20, 1); //load some images onload
});

//Handler for scrolling toward end of document
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        //End of page, load next content here
        if (!loading) loadNextPage();
    }
});

//Load content for next page
function loadNextPage() {
    loadFlckr(per_page, ++page);
}

//Load images from Datasource (Flickr in this case)
function loadFlckr(per_page, page) {
    loading = true; //interlock to prevent multiple calls
    $.mobile.loading('show');
    var flickerAPI = "http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&format=json&api_key=2fd4e1a42e243e332b7e334aa219698e&user_id=74038643@N00&jsoncallback=?";

    //Calling to service provider
    $.getJSON(flickerAPI, {
        per_page: per_page || 20,
        page: page || 1
    })
        .done(function (data) {
        $.each(data.photos.photo, function (i, item) {
            var url = String.format("http://farm{0}.staticflickr.com/{1}/{2}_{3}_{4}.jpg", item.farm, item.server, item.id, item.secret, 't');
            var img = $("<img/>").attr("src", url);
            var li = $("<li/>").append(img);
            var title = $("<h2/>").append(item.title || 'No Title');
            var desc = $("<p/>").append(item.owner);
            li.append(title);
            li.append(desc);
            //Append new list item to listview
            li.appendTo("#list-lazyloader");
        });
        //refresh listview
        $('#list-lazyloader').listview('refresh');
        loading = false;
        $.mobile.loading('hide');
        //Update page index
        page = data.photos.page;
        //Update photos count
        $('#photoCount').text($('#list-lazyloader li').size());
    });
};

//C#-like feature to concat strings
String.format = function () {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i + 1]);
    }
    return s;
}

HTML:

<div data-role="header" data-position="fixed" data-theme="b">
     <h1>Photos (<span id="photoCount">0</span>)</h1>

</div>
<ul id="list-lazyloader" data-role="listview" data-theme="d"></ul>

And here's the working Fiddle:

Lazy-loading Listview

Have fun =)

Updated on 1/8/2017: fixed the broken Flickr API in case public still interest in this solution

Upvotes: 12

Staker
Staker

Reputation: 41

Try this solution: https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin (I am the developer of this plugin)

It's a simple jquery mobile listview pagination plugin that basically adds a "Show More" button to the end of a list (list item count and label text are configurable) and does an Ajax call each time the "Show More" button is clicked. Also works with the jquery mobile Search input box enabled and does caching as well.

Upvotes: 4

Related Questions