In this article, Grégory explains how to implement infinite scroll in CTF listviews.

Dealing with huge amount of data to display in your web app listview can result in performance loss.
Best practice, in this case, would be to perform data pagination on the server side to get only the needed data and automatically request next data when reaching the end of the listview when scrolling down.
The source code for this sample can be downloaded here: demoInfiniteScroll.

Server side pagination

Instead of requesting all data at once, you should consider implementing pagination in your request. This will result in less data to communicate to the client side and speed performance.
Various existing SQL Databases support pagination queries, for example:

_ MySQL and PostgreSQL:SELECT * FROM myDB ORDER BY myColumn ASC LIMIT {rowsPerPage} OFFSET {rowsOffset}


_ SQL Server 2012:DECLARE @PageNumber AS INT, @RowspPage AS INT

SET @PageNumber = {pageNb}

SET @RowspPage = {rowsPerPage}

SELECT *

FROM myDB

ORDER BY myColumn

OFFSET ((@PageNumber - 1) * @RowspPage) ROWS

FETCH NEXT @RowspPage ROWS ONLY;


If data come from another source like Web Services, you can use steps in sequences and sub-sequences calls to emulate data pagination (see provided sample project).  

Implementing automatic listview data fill when scrolling

First of all, you need the jQuery plugin called scrollz. Put jquery.scrollz.css in the css folder of your project and jquery.scrollz.js file in the js folder. Declare both files in your app.html file: <link href="css/custom.css" rel="stylesheet" />

<link rel="stylesheet" href="css/jquery.scrollz.css" />

<script src="../../../../scripts/jquery.mobile.min.js" type="text/javascript"></script>

<script src="js/jquery.scrollz.js" type="text/javascript"></script>


In your jQuery mobile content template add following code: <!-- content -->

<div data-role="content" data-scrollz="simple">

<ul

data-role="listview"

data-inset="true"

data-c8o-listen=".getData"

data-c8o-each="row"

data-c8o-accumulate="append">

<li>__=data__</li>

</ul>

</div>


Note the data-scrollz="simple" attribute to instantiate the scrollz jQuery plugin on the content page and the data-c8o-accumulate="append" attribute to add the new data to the existing ones.

Add following code to your custom.js: /**

* Get Next page for a list view

*

*/

C8O.getNextPage = function () {

C8O.call(".getData", {

pageNo: C8O.pageNo++,

rowsPerPage : 10

});



$("[data-scrollz]").one("bottomreached", function() {

C8O.log.debug("Bottom Reached...");

C8O.getNextPage();

});

}



/**

* init_finished hook

* used at page loading after C8O initialization

* or break the processing of request

*

* params: key/value object decoded from the current query or hash string

*

* return: true > lets CTF handle the document

* false > break the processing of request

*/

C8O.addHook("init_finished", function (params) {

$("[data-scrollz]").one("bottomreached", function() {

C8O.log.debug("First time bottom Reached...");

C8O.pageNo = 1;

C8O.getNextPage();

});

return true;

});

Conclusion

Using a small scroll event jQuery plugin and preparing your data for pagination you can easily implement an infinite scroll for CTF listviews and load data on demand for speed performance.