5

I have an application in which i am displaying items coming from service. Here i have around 200 items to display which is some what hard to see.

Here i want to display load more functionality by displaying first 20 and on click of load more it will show next 20 and so on. I am not able to find a way to how to implement this if anyone has idea please help me.

4

2 回答 2

1

Loading 200 items and storing them is not a good approach with phonegap/cordova. We are talking about already slow HTML5 + JS wrapper, this will make it even more slow.

Better approach would be to use a ajax to load more data, ajax call will be triggered when you reach a listview end or when a "load new content" button is clicked.

Here you will find an approach with "load new content" button:

http://jsfiddle.net/knuTW/2/

Here you will find an approach with auto loading listview when listview end is reached:

http://jsfiddle.net/dhavaln/nVLZA/

This example requires this jQuery plugin: http://imakewebthings.com/jquery-waypoints/

And here's my example with auto loading listview and $.ajax in commbination:

http://jsfiddle.net/Gajotres/v4NxB/

Code example, and I repeat this is only a dummy example (still working dummy example):

// load test data initially
for (i=0; i < 10; i++) {
    $("#list").append($("<li><a href=\"index.html\"><h3>" + i + "</h3><p>z</p></a></li>"));
}
$("#list").listview('refresh');


// load new data when reached at bottom
$('#footer').waypoint(function(a, b) {
    // Load some dynamic data with $.ajax
   $.ajax({url: "http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/The Goonies",
        dataType: "jsonp",
        jsonpCallback: 'successCallback',
        async: true,
        beforeSend: function() {
            $.mobile.showPageLoadingMsg(true);
        },
        complete: function() {
            $.mobile.hidePageLoadingMsg();
        },
        success: function (result) {
            ajax.parseJSONP(result);
        },
        error: function (request,error) {
            //alert('Network error has occurred please try again!');
        }
    });    
    $('#footer').waypoint({
        offset: '100%'
    });
}, {
    offset: '100%'
});

var ajax = {  
    parseJSONP:function(result){
        //var jsonObj = jQuery.parseJSON(parameters);
        $("#list").append('<li>Movie name:<span> ' + result[0].original_name+ '</span></li>');
        $("#list").append('<li>Popularity:<span> ' + result[0].popularity + '</span></li>');
        $("#list").append('<li>Rating:<span> ' + result[0].rating+ '</span></li>');
        $("#list").append('<li>Overview:<span> ' + result[0].overview+ '</span></li>');
        $("#list").append('<li>Released:<span> ' + result[0].released+ '</span></li>');        
        $("#list").listview('refresh');
    }
}

You also need to prevent another $.ajax call before last one is over.

于 2012-12-26T13:07:20.300 回答
0

Though I am not much familiar with Phonegap along with Shared Preferences, but little bit of research efforts let me know that there is no direct way to use shared preferences in phonegap(as far as I could search).

  • If you still want to use Shared preferences in Phonegap, you need to add plugin for it.
  • The other way I could find is to use Local Storage using HTML5 and JSON.
  • The other way is to implement a database using Lawnchair. YOu will find a good solution here and here
  • and one of the most efficient way I found so far is Webkit Client side Databse Storage. It would somehow be a good match for your problem.
于 2012-12-26T06:38:40.297 回答