,Microsoft Office SharePoint 2013 Improved List View Paging

Full trust solution to replace the basic back/next pagination on SharePoint 2013 List Views with a proper paging pattern using JSLink on a page by page basis.

Quite simple really, the default pagination on SharePoint List View webparts is quite poor, only providing for back/next style controls. There is no means of seeing the total number of records or pages, nor being able to jump to the start or end without using sorting tricks.

Default Paging Controls

This solution takes advantage of the JSLink functionality in SP 2013 to override the standard footer template and replace the basic paging controls with more classic search style page controls.

New Paging Controls:

To use the solution:

• Download the WSP package and deploy to your SharePoint 2013 farm.
• Test the solution is successfully deployed and available by manually calling both the .js and .aspx files to ensure you can hit the pages successfully:
  • http://yoursite/path/_layouts/15/ImprovedListView/GetPagingLink.aspx
  • http://yoursite/path/_layouts/15/ImprovedListView/JSLink.js
• If all looks good, then go to your list view web part, edit the page, edit the web part properties for the List View.
• Under the Miscellaneous section, add the path to the javascript file in the JSLink field:
  • ~site/_layouts/15/ImprovedListView/JSLink.js
• Click OK and Stop editing the page, you should now see the replaced paging controls

Additional Important Notes

• This solution assumes you are using jQuery already on your SharePoint site. If you’re not, then you will need to grab the source code and update the “updatePagingControls” function to use basic javascript to modify the DOM instead of jQuery. But seriously, why are you not using jQuery?!
• The solution affects ALL list view web parts on the same page, you do not need to add the JSLink reference to each webpart.
• If you need it to not affect some of the list views on a page, sorry you will need to download the source and customize the solution by specifying the BaseViewID and/or ListTemplateType. You could also do this with a custom version of the JS file however, and deploy the solution as is. Put a copy of the JSLink.js file into /_catalogs/masterpage using SharePoint Designer, then customize the variant file and use that in your JSLink field instead of the one I have provided (google: “SharePoint 2013 JSLink” for more details on this).
• This solution is a full trust solution which makes use of an application page, which is deployed to the _layouts folder in the 15 hive. It is therefore not suitable for sandbox style environments where full trust deployments are not allowed. However, you could retrofit the solution to make it purely javascript based by using CSOM calls in order to replicate the server side code on the client instead. I did this to start with, but found the additional AJAX calls made the load times significantly slower (particularly for large lists), and so I chose to go with a server side solution for building the page URLs instead.

Download