Using SPServices and Pagination to create a photo gallery

16 Comments

1. 
   Roberto on September 23, 2015

   Good morning, Thomas.

   Can you post up this example on a working page? or can you at least say what the “pos” var expects? From what I saw, it expects some kind of tag, but I need to know what it has inside this tag.

   Many Thanks!

   Reply
   • 
     Thomas Daly on September 23, 2015

     this article is so old there has to be better ways to go about this. SPServices has changed a lot since the article. If you’re on SP2013 you could use the javascript client object model (REST) or the client side object modal.

     POS if like a token that gets passed, you can figure out what the next token is by just running a query and don’t specify a position. you can put a console.log(xData.responseXML) to view everything that comes back. or alternatively you could use fiddler to see what goes out and what comes back.

     There is an example directly in the code. Line 121-131, if you put that in it’s own function and run that once you’ll see the position key come back. You can put a console.log(firstPos) before or after 129 and you’ll see the token in the debug window of the browser.

     Reply
2. 
   GC on March 15, 2015

   Hi,

   I made some changes & was able to make this work.
   But now I am getting issue while i publish the page.
   while the pagination works fine when the page is in edit mode.

   When i publish the page i get below error:
   Object doesn’t support this property or method

   Do you have any idea, what might be the issue as to why the code is working fine while the page is in edit mode, but it throws “Object doesn’t support this property or method” error when i publish the page.

   Below is the Code :

   .gallery-item img
   {
   height: 150px;
   width: 200px;
   float: left;
   margin-right: 5px;
   margin-bottom: 5px;
   }
   #gallery-pager-controls
   {
   clear: both;
   }
   #gallery-pages div
   {
   float: left;
   margin-right: 5px;
   }

   var rowLimit = 3;
   var list = “Gallery”;
   var query = “”;
   var targetID = “gallery”;

   $(document).ready(function(){

   Update();
   });

   function Update()
   {
   GetItems(“”,rowLimit);
   BuildNav(rowLimit);
   UpdatePrevNext();
   }

   function GetItems(pos, rowLimit)
   {

   //clear any prev content
   $(“#gallery”).html(“”);

   try
   {
   pos = pos.replace(/&/g,’&’).replace(/”/g,’"’).replace(//g,’>’);
   }
   catch(e)
   {
   }

   $().SPServices({
   operation: “GetListItems”,
   async: false,
   listName: “Discovery Series Events”,
   CAMLQuery: “No”,
   CAMLQueryOptions: “”,
   CAMLRowLimit: rowLimit,
   completefunc: function(xData, Status) {
   $(xData.responseXML).SPFilterNode(“z:row”).each(function(index) {
   var strHtml = “”;
   var strtitle = $(this).attr(“ows_Title”);
   strHtml += “” + strtitle + “”;
   $(“#gallery”).append(strHtml);
   });
   }
   });
   }

   function BuildNav(rowLimit)
   {
   //Unbind old objects
   $(“gallery-prev a”).unbind(‘click’);
   $(“gallery-next a”).unbind(‘click’);
   $(“.pager a”).unbind(‘click’);
   //Clear current nav
   $(“#gallery-pages”).html(“”);

   var totalItems = 0;
   var firstPos = “”;

   //execute once to get all items
   //not using rowlimit to return all items
   $().SPServices({
   operation: “GetListItems”,
   async: false,
   listName: “Discovery Series Events”,
   CAMLQuery: “No”,
   completefunc: function (xData, Status) {
   totalItems = $(xData.responseXML).SPFilterNode(“rs:data”).attr(“ItemCount”)
   }
   });

   //execute again to retrieve first position
   //this uses rowLimit
   $().SPServices({
   operation: “GetListItems”,
   async: false,
   listName: “Discovery Series Events”,
   CAMLQuery: “No”,
   CAMLRowLimit: rowLimit,
   completefunc: function (xData, Status) {
   firstPos = $(xData.responseXML).SPFilterNode(“rs:data”).attr(“ListItemCollectionPositionNext”);
   }
   });

   if(eval(totalItems > rowLimit))
   {
   $(“#gallery-pages”).append(‘Prev‘);

   var pages = Math.ceil(totalItems / rowLimit);
   var nextPos = “”;

   for(i=1;i<=pages;i++)
   {
   if(i==1)
   {
   $("#gallery-pages").append("” + i + ““);
   nextPos = firstPos;
   }
   else
   {
   if(i==2)
   {
   $(“#gallery-pages”).append(“” + i + ““);
   }
   else
   {
   nextPos = GetNextPos(nextPos, rowLimit);
   $(“#gallery-pages”).append(“” + i + ““);
   }
   }
   }

   $(“#gallery-pages”).append(‘Next‘);
   }
   }

   function UpdatePrevNext()
   {
   $(“.pager a”).click(function(){
   $(“.pager a”).removeClass(“selected”);
   var id = $(this).parent().attr(“id”);
   id = id.substring(id.indexOf(‘-‘)+1)
   $(this).addClass(“selected”);
   });

   $(“#gallery-prev a”).click(function(e){
   e.preventDefault();

   var id = $(“.pager a.selected”).parent().attr(“id”);
   id = id.substring(id.indexOf(‘-‘)+1);

   //is there an item below?
   if(id != 1)
   {
   $(“.pager”).eq(id-2).find(“a”).click();
   var href = $(“.pager”).eq(id-2).find(“a”).attr(“href”);
   href = href.substring(href.indexOf(‘”‘),href.length-1);
   href = href.split(‘,’);
   var page = href[0].substring(1,href[0].length-1);

   var rowLimit = href[1].substring(1,href[1].length-1)
   GetItems(page,rowLimit);
   }
   });

   $(“#gallery-next a”).click(function(e){
   e.preventDefault();

   var id = $(“.pager a.selected”).parent().attr(“id”);
   id = id.substring(id.indexOf(‘-‘)+1);
   //is there an item above?
   total = $(“.pager”).length;
   if(id != total)
   {
   $(“.pager”).eq(id).find(“a”).click();

   var href = $(“.pager”).eq(id).find(“a”).attr(“href”);
   href = href.substring(href.indexOf(‘”‘),href.length-1);
   href = href.split(‘,’);
   var page = href[0].substring(1,href[0].length-1);

   var rowLimit = href[1].substring(1,href[1].length-1)
   GetItems(page,rowLimit);
   }
   });
   }

   function GetNextPos(pos, rowLimit, query)
   {
   try
   {
   pos = pos.replace(/&/g,’&’).replace(/”/g,’"’).replace(//g,’>’);
   }
   catch(e)
   {}

   $().SPServices({
   operation: “GetListItems”,
   async: false,
   listName: “Discovery Series Events”,
   CAMLQuery: “No”,
   CAMLQueryOptions: “”,
   CAMLRowLimit: rowLimit,
   completefunc: function(xData, Status) {
   pos = $(xData.responseXML).SPFilterNode(“rs:data”).attr(“ListItemCollectionPositionNext”);
   }
   });

   return pos;
   }

   Reply
   • 
     Thomas Daly on March 16, 2015

     what line specifically does that error on? typically that error is in response to a library not available. like jQuery or SPServices. I’d first view source make sure those links work, then it’s possible your loading jquery twice somewhere.

     Reply
3. 
   Antonio Augusto Silveira on October 28, 2014

   I tried with jquery.SPServices-2014.01.min.js and jquery-1.11.1.min.js but is not paging correctly. Can anyone help me?

   Reply
   • 
     Thomas Daly on January 3, 2015

     I’m sorry this is a really old post. There might be better ways to handle this now.

     Reply
4. 
   L Sanderson on February 12, 2013

   Tom,

   Thanks for this. I’m not getting the paging to work for numbers greater than 2. Any help?

   Reply
   • 
     Thomas Daly on February 21, 2013

     Did you follow everything exact? I’ll try this out just to make sure it’s working. You have to use the version of jQuery and SPServices as listed in the article or it may not work correctly.

     Reply
   • 
     augrad94 on May 29, 2014

     I am having the same issue. Did you ever find a solution?

     Reply
     • 
       Thomas Daly on May 29, 2014

       This article is very outdated at this point. This was written on SharePoint 2007 with very early versions of jQuery & SPServices.

       There are definitely better solutions out there at this point for a photo gallery even free webparts if you search for them.

       Reply
5. 
   Lee Wolowich on November 22, 2011

   Oops, meant to include path to scripts reply:

   Reply
6. 
   Lee Wolowich on November 22, 2011

   I’m hoping you can help me – I’m just getting started with Sharepoint and I’ve tried to implement this solution on my sharepoint (2010 Foundations) site, but so far no success. I created a document library called ‘js’ and uploaded the scripts there. I am using the same versions of jquery and SPServices that you quoted in the Pre-requisites

   My picture library is called ‘Gallery’ I’ve copied the CEWP and only changed the src path of the scripts to the scripts are:

   The path to my Picture Library is:
   /Lee/Gallery/

   What am I missing? Any help would be appreciated…

   Reply
7. 
   GP on April 16, 2011

   Thomas – thank you for explaining this, I’m trying to use the pagination feature you explain here in another project of mine but I’m facing some issues. BTW I did a Google search for SPServices and Pagination and was brought right in your backyard 🙂 I have never been to your blog before and must say – I’m already a fan of the good solutions you share explain on your blog.

   If time permits you, can you show an example of fetching SharePoint list data using SPServies but then displaying the list data in datatables?. I already have created a fully working ASPX page getting SP list data using SPServices and then displaying it in datatables, but for the life of me I can’t seem to get the pagination to work. I want the pagination to make AJAX calls when the user requests it Pg 1, Pg 2 Pg etc and not load all the data into the DOM in one AJAX call – which my page is currently doing, thereby slowing the performance.

   thanks

   Reply
   • 
     Thomas Daly on April 16, 2011

     Thanks for taking the time to check out my blog! I took a look at the datatables to see how that might work. I will take crack at it this weekend and see if I can get that working.

     The solution I posted would created the pagination portion. Just like you want but I’m guessing that your using the datatables for some of the other functionality as well. I love a challenge so I’ll let you know what I come up with.

     Just so I know, what are the main features of the datatables that you are using.. excluding the pagination? I have an idea for an alternate solution which would use the some of the code in the post to build some html structure of data and use some form of jquery scripts to make a sortable table OR find another script that would meet your requirements.
     -td

     Reply
   • 
     Thomas Daly on April 26, 2011

     After doing some more research I think your best bet is to use jquery tablesorter (http://tablesorter.com/docs/) That doesn’t have a pagination piece (initially – but plugin available).. so you could use what I have explained to build the individual pages and then enable this once the new data comes in. The plugin that they have to do pagination would probably require all data on the page as well. This way should be pretty straightforward, Good Luck!

     Reply
     • 
       GP on May 6, 2011

       thanks Thomas, I will get working on it and share my experience at a later time.

       Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.