Hello
SharePointers!
Through this blog, I will walk you through a JS library implemented by me which helps us to load SharePoint list items on demand with no trouble. All you need to do is include LazyLoading.JS file in your java script code and call its methods.
LazyLoading.CamlQuery = new SP.CamlQuery();
5.Pagination logic
Through this blog, I will walk you through a JS library implemented by me which helps us to load SharePoint list items on demand with no trouble. All you need to do is include LazyLoading.JS file in your java script code and call its methods.
Without any delay, I will go straight to the
implementation.
Problem Statement
Load 10 ( it may vary as per requirement ) list
items from a SharePoint list initially and then on vertical scroll down load
another 10 and so on until there are not items left in the SharePoint list.
Solution
1.
Include
LazyLoading.JS in your code
2.
Initialize
LazyLoading objects
3.
Call
LazyLoading.Functions.loadItems() method
4.
Define
onLazyLoadSuccess() and onLazyLoadFail() methods
5.
Pagination Logic
1.Include LazyLoading.JS in your code
You
can download the LazyLoading.JS from my GitHubrepository. Include the JS file:
<script src="../LazyLoading.js"></script>
2.Initialize
LazyLoading Objects
Initialize subsequent objects which are self-describing:
Initialize subsequent objects which are self-describing:
//Initialization
LazyLoading.ListName = "MyList";
|
LazyLoading.PageIndex = 1;
|
LazyLoading.PageSize = 30;
|
LazyLoading.ResultCounter = 0;
|
LazyLoading.SiteUrl = _spPageContextInfo.siteAbsoluteUrl;
|
LazyLoading.ViewPortHeight = $(window).height();
|
LazyLoading.Context = SP.ClientContext.get_current();
|
LazyLoading.Web = LazyLoading.Context.get_web();
|
LazyLoading.List = LazyLoading.Context.get_web().get_lists().getByTitle(LazyLoading.ListName);
Initialize CAML Query as well by applying filter and page size.
|
LazyLoading.CamlQuery.set_viewXml("<View><ViewFields><FieldRef
Name='Title'/><FieldRef Name='Details'/></ViewFields>"+"<RowLimit>"+LazyLoading.PageSize+"</RowLimit></View>");
3.Call loadItems() methood
Make a call to loadItems()
//Loads Initial bunch of items with specified page size
LazyLoading.Functions.loadItems();
This method will load the list items with depending upon the PageSize
and PageIndex value specified in step
2.
4.Define onLazyLoadSuccess() and OnLazyLoadFail()
methods
onLazyLoadSuccess( ) and onLazyLoadFail( ) are the callback function for
loadItems( ) method. So, we need to generate the html and bind the values
returned by loadItems( ).
// This function returns list items w.r.t.
specified page value
function onLazyLoadSuccess() {
|
|||
LazyLoading.ListEnumerator = LazyLoading.SpItems.getEnumerator();
|
|||
while(LazyLoading.ListEnumerator.moveNext()) {
|
|||
generateDynamicHTMLCode();
|
|||
}
|
|||
if( LazyLoading.ResultCounter < LazyLoading.PageSize)
|
|||
{
|
|||
$("#loadingImg").hide();
|
|||
}
|
|||
LazyLoading.Functions.managePagerControl();
|
|||
}
|
|||
//Error callback
|
|||
function onLazyLoadFail(error) {
|
|||
console.log(error);
|
|||
}
|
|||
//Generates dynamic
HTML for each List Item
|
|||
function generateDynamicHTMLCode()
|
|||
{
|
|||
var htmlCode = "";
|
|||
LazyLoading.Item = LazyLoading.ListEnumerator.get_current();
|
|||
LazyLoading.ResultCounter++;
|
|||
//ID
|
|||
var itemId = LazyLoading.Item.get_item('ID');
|
|||
//Title
|
|||
var titleValue = LazyLoading.Item.get_item('Title');
|
|||
//Details
|
|||
var detailsValue = LazyLoading.Item.get_item('Details');
|
|||
//Generate HTML
|
|||
htmlCode =
htmlCode + "<div>";
|
|||
htmlCode =
htmlCode +"<p>"+titleValue+"</p>";
|
|||
htmlCode =
htmlCode +"<p>"+detailsValue+"</p>";
|
|||
htmlCode =
htmlCode + "</div>";
|
|||
$('#ItemsGrid').append(htmlCode);
|
|||
}
|
|||
To load the next bunch of data, we need call getNextPage( ) function
which loads the data with updated Page Index value.
$("#s4-workspace").scroll(function() { | |
getNextPage();
|
|
});
|
|
//Gets next bunch
of data
|
|
function getNextPage()
|
|
{
|
|
if($("#loadingImg").offset().top < LazyLoading.ViewPortHeight)
|
|
{
|
|
LazyLoading.PageIndex = LazyLoading.PageIndex + 1;
|
|
if (LazyLoading.NextPagingInfo) {
|
|
LazyLoading.Position = new SP.ListItemCollectionPosition();
|
|
LazyLoading.Position.set_pagingInfo(LazyLoading.NextPagingInfo);
|
|
}
|
|
else {
|
|
LazyLoading.Position = null;
|
|
}
|
|
if(LazyLoading.Position != null)
|
|
{
|
|
LazyLoading.Functions.loadItems();
|
|
}
|
|
else
|
|
{
|
|
$("#loadingImg").hide();
|
|
}
|
|
}
|
|
}
|
This is how we ca use LazyLoading.JS to accomplish loading of
list items on demand. You can find the source code here.
Happy learning ! 😎