JSLink with Paging for Rendering List Views

Today I dove into JSLink. There are many BlogPosts on how it works but none were showing how I can implement the SharePoint paging that is part of a SharePoint List View. It’s surprisingly easy!

I started with this BlogPost to figure out how this JSLink property works: http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/

Custom Item Rendering

When you just want to change the rendering of the Fields inside the View, the paging section will still be on the Page because it’s rendered in the Footer. However if you want to use custom rendering for all Items including Header and Footer, you’ll have to implement paging yourself.

Luckily all the data we need to provide Paging in the likes of the default Paging is in the Context. We need to read from ctx.ListData in our render function. ListData contains the following properties:

  • ctx.ListData.FirstRow;
  • ctx.ListData.LastRow;
  • ctx.ListData.PrevHref;
  • ctx.ListData.NextHref;

This is all the information we need. We can render the HTML ourselves in the Footer of the Template. An example:

pagingControl: function (ctx) {
        var firstRow = ctx.ListData.FirstRow;
        var lastRow = ctx.ListData.LastRow;
        var prev = ctx.ListData.PrevHref;
        var next = ctx.ListData.NextHref;
        var html = “<div class=’Paging’>”;
        html += prev ? “<a class=’ms-commandLink ms-promlink-button ms-promlink-button-enabled’ href='” + prev + “‘><span class=’ms-promlink-button-image’><img class=’ms-promlink-button-left’ src=’/_layouts/15/images/spcommon.png?rev=23′ /></span></a>” : “”;
        html += “<span class=’ms-paging’><span class=’First’>” + firstRow + “</span> – <span class=’Last’>” + lastRow + “</span></span>”;
        html += next ? “<a class=’ms-commandLink ms-promlink-button ms-promlink-button-enabled’ href='” + next + “‘><span class=’ms-promlink-button-image’><img class=’ms-promlink-button-right’ src=’/_layouts/15/images/spcommon.png?rev=23’/></span></a>” : “”;
        html += “</div>”;
        return html;
    }

The complete rendering JS template can be downloaded here. Just upload the JS file to a Library and refer from a Blogs Posts list View WebPart to the js file. The JS file is set to render BaseViewID = 1 which is AllPosts.aspx.

Note: For this example to work, add the Field “Body” to the View
Note: You can use the ~sitecollection token in the JSLink property.


Result

Before:

Schermafbeelding 2013-02-18 om 16.06.20

After:

Schermafbeelding 2013-02-18 om 16.14.37

22 comments

  1. bruno says:

    Hello,

    I wondering how you create pages with 5 elements each. When I use your code to create a paging, each page have the number of elements that I have in the list. Could you explain me how you set 2 pages?

    • Cas van Iersel says:

      This is just the setting from the View itself. No code needed. By Default I think it’s set to 30 so change it to 1 and see the results 🙂

  2. Fox says:

    Thank you so much! This helped me out. I am Curious why it’s even necessary to specify the PagingHTML. Why can’t we just leave it out entirely and SharePoint just render it. We do specify to use Paging in the ViewXML anyways. But thanks, yours works perfectly!

  3. Swapnil says:

    Hi Cas,
    I am getting error for
    ctx.ListData.PrevHref;
    ctx.ListData.NextHref;
    these two fields showing undefined.
    Any guess why this is happening?

  4. Anirudh says:

    Hi Cas,
    That’s a wonderful article,superb.

    I would like to know how do i enable the default paging for data view web part?
    I have created a page, added the data view web part and linked it to a document library.
    Now i want async paging for this.How can i do it.

    Thanks,
    Anirudh.

  5. Gaëlle says:

    Hi Cas, awesome work!
    Infortunately, it does not work on my view.
    I want to display 5 items on a page, and a paging to load 5 less recent items, and so on.
    All i got is the number of items (1 to 6) but no arrows, and the 6th is on the first page, but i want it on the second one..
    Any toughts?
    Thanks a lot

    • Gaëlle says:

      For precisions : i don’t have any arrows, but that is because in my console, i’ve checked ctx.ListData, and there is absolutely no PrevHref in ListData… i’m on SP2013 standard, do you have any idea on what coul be the problem? thanks!

      • Cas van Iersel says:

        Hey Gaëlle,

        Did you set the paging property in the View itself (default 30) back to 5? You can check it by modifying the View and look for “Itemlimit”.
        Hope this helps. Sorry for the late response!

        Cas

  6. SPAdmin says:

    How can get the total rowcount to display in footer.

  7. mohamed tayel says:

    hello MR Van
    i read your post but i didn’t understand how to apply this script to list view

    • Cas van Iersel says:

      Hi, You have to put this script in a JS file and upload it to a location of your choice but on the same SiteCollection from where you are going to use it. Then if you place a ListViewWebPart on a page edit the Properties and look for the JSLink property. There add the relative path to your JS file using a token. Like: ~sitecollection/style library/scripts/myscript.js

  8. Regin says:

    Thanks! This works.

    Only issue is all the web parts on the page (2 announcements, 1 CSWP and 1 RSS) refresh when paging on one of them is used. Anyway to avoid refresh on the others? Thanks again.

    • Cas van Iersel says:

      Hey Regin,

      Unfortunately I didn’t take this scenario into account since I wrote this for a List View page where normally you wouldn’t find any other WebParts. All the paging controls are rendered as links. Even though they route to the same page it’s always a “refresh”. The only way you can prevent this behavior is to completely write a custom View in JS that handles the paging client side without refreshing.

      Cheers,
      Cas

  9. Akhil says:

    Hi Cas,
    Superb article.This helped me 🙂

  10. Susan Penney says:

    Hi, This was exactly what I was after and works well.
    However, I’ve had a few people report they can’t see the paging control at all. Any idea why that might be?

    • Cas van Iersel says:

      Hey Susan, great to hear! Did you by any chance check if the files you altered are checked-in and published? That would be my first guess. Kind regards, Cas

  11. David says:

    Hi Cas – thank you so much for the code! Just wondering if you have code to handle “Enable Asynchronous Update” when used on a page (e.g. with multiple list views)? At the moment (when the code you provide is used) the entire page refreshes. I would like to be able to perform an asynchronous page for the current list. Thanks!

    • Cas van Iersel says:

      Hey David I think the easiest way is to get the data in the list using a REST call and build the paging yourself using a library like KnockOut. The model used in this post is built on the possibilities the current context provides. That model is based on getting a resultset based on URL with QueryString. Unfortunately I can’t help you with the exact code to make it asynchronous. You can check out this code that works based on KnockOut which is based on data that is fetched Asynchronous. https://blog.greatrexpectations.com/2012/07/11/paging-lists-with-knockout/ You still have to fetch the data yourself.

Leave a Reply

Your email address will not be published. Required fields are marked *