Show paging at top in list view web part in SharePoint 2013/2016/Online using jQuery

This SharePoint javascript tutorial, we will discuss how to show paging at the top in the list view web part in SharePoint 2013 online or SharePoint on-premise.

By default in SharePoint 2013 Online or SharePoint on-premise paging for list or document library shows at the button of the page. It looks like below:

Show paging at top in list view web part SharePoint

If you have any user who is coming from MOSS 2007 to SharePoint 2013 or Online, then they might see the different user experience. This way we got the requirement to change the paging button positions from the button to the top of the list view web part. We can do this by using JavaScript or jQuery object model.

Show paging at top in list view web part in SharePoint

You can edit the page which contains your list or document library. Then add a script editor web part into the page and add the below code into the page.

<script type="text/javascript" src="https://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<script type="text/javascript">
$(document).ready( function()
{
var header = $("table.ms-listviewtable");
var table = $("#bottomPagingCellWPQ2");

if(header && table)
{
table.insertBefore(header);
$("#bottomPagingCellWPQ2″).css('text-align', 'right');
}
else
{
alert('jQuery did not found Elements.');
}
});
</script>
<style type="text/css">
td#bottomPagingCellWPQ2{float:left}
</style>

After this Save the page and now you can see the paging button will appear in the top of the list view web part.

Show paging at top in list view web part SharePoint using jquery

You may like following SharePoint customization tutorials:

This SharePoint tutorial we discussed how to show paging at the top in list view web part in SharePoint 2013/2016/Online using jQuery.

Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

  • Carl says:

    Hi There,
    I have set the item limit of the list view, and have a connections to the other web parts. When I search for the list view and say I am now in page 2, when I click to select an item in the list, it shows the details in the other web part. However, the list view pagination reset back to page 1.

    How can I retain to the page where the user clicked an item in the list view?

  • >