JQuery Mobile listview paging
What is the efficient way to work with a long list in jQuery Mobile listbox? Take 1000 items, for example, showing 1000 items at the same time, making it useless for the user. Imagine scrolling through such a long list.
I'm going to implement custom paging for a listview, is there a better approach other than rolling my own paging?
** UPDATE Please see my updated answer with the Fiddle example below
source to share
OK, I decided to create my own listse list plugin. And it turned out to be a really great user experience!
Just a hint for anyone still looking for a long scroll list solution.
- UPDATE
I must say, sorry I didn't have time to post the example earlier, as I am not allowed to post the source code we used on the internet. Now, finally, I'm free and decided to spend a few hours to restore the lazy load list (just 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 Fiddle at work:
Good luck =)
Updated 1/8/2017: Fixed broken Flickr API in case the public is still interested in this solution
source to share
Try this solution: https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin (I am the developer of this plugin)
This is a simple jQuery mobile listview pagination plugin that basically adds a Show More button to the end of the list (list item count and label text are customizable) and every time Show More button makes an Ajax call clicked. Also works with jquery mobile search input field enabled and cached as well.
source to share