0

We have a requirement to show 6 items from SharePoint list on scroll event. That is: On each scroll event we need to show the next 6 items in a div section

Has anybody worked on this type of requirement?

  • I am not sure what you are trying to do. But you can use OOTB list web part. Set item limit to 6 on page. Which will automatically give you the next and previous button to scroll through all items – Ganesh Sanap Nov 2 '18 at 7:37
  • we need to show in an html page (customization) on scroll event we need to show 6 item per scroll event. – Pradeep Nov 2 '18 at 7:39
  • What do you mean by scroll? Horizontal or vertical? You can fetch all items from list using REST and use bootstrap carousel type functionality to show the items on html page – Ganesh Sanap Nov 2 '18 at 7:42
  • vertical scroll on a html page , on each scroll event we have load next set of 6 items from a list, bootstrap carousel does not serve the purpose.. i believe. – Pradeep Nov 2 '18 at 7:44
0

With jquery you will be able to achieve this..Below code snippet will help you understand.

$(document).ready(function () {

    SP.SOD.executeOrDelayUntilScriptLoaded(getFirstSixItems, "sp.js");

    $('#idOfYourItemContainer').scroll(function () {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            if (nextPagingInfoBday) {
                position = new SP.ListItemCollectionPosition();
                position.set_pagingInfo(nextPagingInfoBday);
            }
            else {
                position = null;
            }

            getNextData();
        }
    });

});


function getFirstSixItems() {
    Context = new SP.ClientContext(_spPageContextInfo.siteAbsoluteUrl);
    objWeb = Context.get_web();
    objList = objWeb.get_lists().getByTitle("YourListName");
    camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query></Query><RowLimit>6</RowLimit></View>');
    itemCollection = objList.getItems(camlQuery);
    Context.load(itemCollection);
    Context.load(objWeb);
    Context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailOfLoad));
}

function onSuccess() {

    listItemEnumerator = itemCollection.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        //html operation to diplay items in your container
    }

    if (itemCollection.get_listItemCollectionPosition()) {
        nextPagingInfoBday = itemCollection.get_listItemCollectionPosition().get_pagingInfo();
    } else {
        nextPagingInfoBday = null;
    }
}

function onFailOfLoad(sender, args) {
    alert(' failed');
}


function getNextData() {
    if (position != null) {
        //If more items are to be fetched, make a second call to the server and fetch the next group of items.
        camlQuery.set_listItemCollectionPosition(position);

        itemCollection = objList.getItems(camlQuery);
        Context.load(itemCollection);

        //Call the same function recursively until all the items in the current criteria are fetched.
        Context.executeQueryAsync(Function.createDelegate(this, this.onSuccess), Function.createDelegate(this, this.onFailOfLoad));
    }
}

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.