Is there a way of adding a button in the Dispform.aspx or the editform.aspx that will take you to the next item in the list?


3 Answers 3


Based on the answer of Aboba I tweaked the script a little bit. It dynamically builds the new URL and loops through all list items to get all item ID's. Therefore it skips items that have already been deleted. If the last item has been reached, the button is hidden.

I added the code in a code snippet web part on the display & editform of the library. The only thing you have to enter is the listname (in code).

<script type="text/javascript" src="/sites/sitename/Style%20Library/custom/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/sites/sitename/Style%20Library/custom/js/jquery/jquery.SPServices.min.js"></script>
    var pageID = GetUrlKeyValue("ID", false);
    var listItems = new Array();
    // uncomment if you want to sort by itemID
    //var CamlQuery = '<Query><OrderBy><FieldRef Name="ID" /></OrderBy></Query>';
    var CamlViewFields = '<ViewFields><FieldRef Name="ID" /></ViewFields>';

    //Get all list item with the specified CAML query and put them into an array
        operation: "GetListItems",
        async: false,
        listName: "Documents",
        CAMLViewFields: CamlViewFields,
        //CAMLQuery: CamlQuery,
        completefunc: function (xData, Status) {
          $(xData.responseXML).SPFilterNode("z:row").each(function() {
                var itemID = $(this).attr("ows_ID");

    var arr = listItems;        
    var current = arr.indexOf(pageID) + 1; 

    //Get the current URL
    var currentUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;

    // Loop through the array with itemID's and add the index to the URL
    for (i = current; (i < (current + 1)) && (i < arr.length); i++) {
        //Concatenate the URL and the new pageID
        var html = currentUrl + "?ID=" + arr[i];

    if (typeof html === 'undefined'){
    } else {
            location.href = html;
            // Show a SharePoint-like notification 
            SP.UI.Notify.addNotification('Processing...', false);
<div class="nextButton">
    <input type="button" ID="next" name="next" value="next" />
  • Try using a REST query to find out the next smallest ID
    – Choggo
    Oct 17, 2014 at 10:21
  • 1
    Nice improvement, one last suggestion, for large lists this will crash due to throttling. If you use the Row limit = 1 on your order by ID you already get ONLY the next item and minimize the load.
    – Choggo
    Oct 23, 2014 at 11:14
  • Do you know how we can Save first and then proceed to the next item? Nov 18, 2014 at 18:47

The following should work, note it does not save any changes when you click it, it just takes you to the next item. I placed it in a Snipped webpart (Sharepoint 2013) on the eidt page, but you could use SharePoint designer as well.

You will need to update the url portion of the a tag to reference your own site, although there is probably a way to pull this automatically as well.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    var pageID = GetUrlKeyValue("ID", false);
    var html = "<a href='/sites/testsite/Lists/Test%20List/EditForm.aspx?ID=" + pageID + "'>Link</a>"

<div class='nextButton'></div>

But Previous and Next do not have to be the ID value.

What if you want to browse by any other Column?

Here is an Out of the Box thinking solution.
Can be converted to CSR as well, but this works in 2010 also

Whole clue is that the order of Prev/Next browsing is fully controlled by a View

  • Create a Calculated Column with Formula (set to datatype=Number)
    paste this in Notepad first, we will make one change at the end!

    ="<img src=/_layouts/images/blank.gif onload=""{"
    &"var TR=this;while(TR.tagName!='TR'){TR=TR.parentNode}"
    &"var TABLE=TR;while(TABLE.tagName!='TABLE'){TABLE=TABLE.parentNode}"
    &"var n=TR.rowIndex;"
    &"var item=ctx.ListData.Row[n-1];"
    &"var prev=n>1?ctx.ListData.Row[n-2].ID:false;" 
    &"var next=TABLE.rows.length-1>n?ctx.ListData.Row[n].ID:false;" 
    &"var thisID=GetUrlKeyValue('ID');"
    &"var url='<div style=float:{2}><a href='+document.location.pathname+'?ID={0}>{1} (ID:{0})</a></div>';"
    &"var prevHTML=prev?String.format(url,prev,'Previous','left'):'<div style=float:left>This is the first Item</div>';"
    &"var nextHTML=next?String.format(url,next,'Next','right'):'<div style=float:right>This is the last Item</div>';"
    &"var HTML=String.format('<div style=position:relative;margin-top:0px>{0}  This ID:{2} {1}</div>',prevHTML,nextHTML,thisID);"
    &"this.parentNode.innerHTML=String.format('prev:{0} next:{1}',prev,next);"
  • Create a View which displays this column, it should look like:
    it doesn't really matter what columns you display,
    the prev/next column is the only column required

  • Now goto your DisplayForm and add this View below your Form
    • add your List
    • Select your view
    • Change WebPart Properties > Layout > Zone-index to 99

Your View should now be displayed at bottom of the DisplayForm

  • Test the Previous / Next links

  • Go back to the Formula in Notepad (I warned you to save it there first!)

  • Change the line:

  • to:

  • To counter the positioning change the margin-top in the previous line to -80

  • Replace the Calculated Column Formula

  • Go back to a Display Form

Your DisplayForm bottom should now look like:

  • Change the HTML formatting to whatever you want
    always change the Formula in Notepad, be very carefulll; Tt is a pain to debug Calculated Column formulas
    If you have some JavaScript skill try my CalcMaster BookMarklet, available on GitHub, it will help editting Formulas IN SharePoint

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.