0

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?

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.

1
  • Where does pageInfocome from in the above snippet? – Robert Lindgren Jun 19 '14 at 11:01
0

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.

2
  • yes I can fire one function when scroll bar reaches to bottom end. but how to append/display next 5 list items.? for loop..?? i want help in logic.! I can not use item ID as ID can be different somtime if someone deletes list items..! – Rajeev K Jun 19 '14 at 10:18
  • so basically i need help in logic. – Rajeev K Jun 19 '14 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.