Load more list items on scroll

Question

I am showing the first 5 list items on the page (in one div). Div has vertical scroll bar.

I want to show the remaining 5 items on when scroll goes down end. I am using CSOM to fetch list items. Any idea how to load remaining content on scroll?

Answer 1

You can use Sharepoint paging to get next 5 items on scroll event. In the sample code previous and next actions are defined(for next and last listitems). You need only next button click code . So just define your scroll event and use btnNext click code defined below:

var context, 
    web, 
    spItems, 
    position, 
    nextPagingInfo, 
    previousPagingInfo, 
    listName = 'ContactsList', 
    pageIndex = 1, // default page index value 
    pageSize = 4, // default page size value 
    list, 
    camlQuery; 

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model  
$(document).ready(function () { 
    context = SP.ClientContext.get_current(); 
    list = context.get_web().get_lists().getByTitle(listName); 
    camlQuery = new SP.CamlQuery(); 

    $("#btnNext").click(function () { 
        pageIndex = pageIndex + 1; 
        if (nextPagingInfo) { 
            position = new SP.ListItemCollectionPosition(); 
            position.set_pagingInfo(nextPagingInfo); 
        } 
        else { 
            position = null; 
        } 

        GetListItems(); 
    }); 

    $("#btnBack").click(function () { 
        pageIndex = pageIndex - 1; 
        position = new SP.ListItemCollectionPosition(); 
        position.set_pagingInfo(previousPagingInfo); 
        GetListItems(); 
    }); 

    GetListItems(); 
}); 

function GetListItems() { 
    //Set the next or back list items collection position 
    //First time the position will be null 
    camlQuery.set_listItemCollectionPosition(position); 

    // Create a CAML view that retrieves all contacts items  with assigne RowLimit value to the query 
    camlQuery.set_viewXml("<View>" + 
                              "<ViewFields>" + 
                                     "<FieldRef Name='FirstName'/>" + 
                                     "<FieldRef Name='Title'/>" + 
                                     "<FieldRef Name='Company'/>" + 
                                "</ViewFields>" + 
                             "<RowLimit>" + pageSize + "</RowLimit></View>"); 

    spItems = list.getItems(camlQuery); 

    context.load(spItems); 
    context.executeQueryAsync( 
            Function.createDelegate(this, onSuccess), 
            Function.createDelegate(this, onFail) 
        ); 
} 

// This function is executed if the above OM call is successful 
// This function render the returns items to html table 
function onSuccess() { 

    var listEnumerator = spItems.getEnumerator(); 
    var items = []; 
    var item; 

    while (listEnumerator.moveNext()) { 
        item = listEnumerator.get_current(); 
        items.push("<td>" + item.get_item('FirstName') + "</td><td>" + item.get_item('Title') + "</td><td>" + item.get_item('Company') + "</td>"); 
    } 

    var content = "<table><tr><th>First Name</th><th>Last Name</th><th>Company</th></tr><tr>" 
                + items.join("</tr><tr>") + "</tr></table>"; 
    $('#content').html(content); 

    managePagerControl(); 
} 

function managePagerControl() { 

    if (spItems.get_listItemCollectionPosition()) { 
        nextPagingInfo = spItems.get_listItemCollectionPosition().get_pagingInfo(); 
    } else { 
        nextPagingInfo = null; 
    } 

    //The following code line shall add page information between the next and back buttons 
    $("#pageInfo").html((((pageIndex - 1) * pageSize) + 1) + " - " + ((pageIndex * pageSize) - (pageSize - spItems.get_count()))); 

    previousPagingInfo = "PagedPrev=TRUE&Paged=TRUE&p_ID=" + spItems.itemAt(0).get_item('ID'); 

    if (pageIndex <= 1) { 
        $("#btnBack").attr('disabled', 'disabled'); 
    } 
    else { 
        $("#btnBack").removeAttr('disabled'); 
    } 

    if (nextPagingInfo) { 
        $("#btnNext").removeAttr('disabled'); 
    } 
    else { 
        $("#btnNext").attr('disabled', 'disabled'); 
    } 

}

You can download the whole source code from: http://code.msdn.microsoft.com/sharepoint/SharePoint-JSOM-list-5104ca92

http://social.technet.microsoft.com/wiki/contents/articles/18606.sharepoint-2013-paging-with-sharepoint-client-object-model.aspx

This would result in better performance.

Answer 2

You can do one thing. Get all items at one go and just show 5 items at a time. Then using jQuery when you scroll down you can show other items.

http://forum.jquery.com/topic/hid-show-based-on-scroll

Hope this helps.