1

We have to load records into page using REST API and to show 5 records per screen. So we want to have Prev and Next buttons so that user can navigate backward and front as loading of all records at a time is too time consuming due to various calculations.

I achieved Next Button functionality with data.d.__next but now i want to go back as well. So how i can go back to see my records.

Below is the code right now.

$(document).ready(function (){ 

    $("#Next").click(function() {

        if(nextURL)
        {
        //clear body of table
            $('tbody').empty();
            //Load next 5 items
        fetchDetails(nextURL)

        }


      });
});
var URL = siteURL + "/_api/web/lists/getByTitle('System')/items?$Top=5&$select=*&$orderby=Title asc";
var nextURL="";

funtion fetchDetails(URL)
{
    ajax({
            url: URL,
            type: "GET",
            headers: {
                "Accept": "application/json;odata=verbose",
                "X-RequestDigest": $('#__REQUESTDIGEST').val()
                      },
            success: function(data) {
                nextURL = data.d.__next;
                }
        });
}

1 Answer 1

1

This is fairly simple - just store the items locally as you fetch them, so that you still have them if you want to go back to them, and then keep track of the index of the first item you want to show in your table so you can select the correct 5 items from your array of all the items.

You clearly have not shown all your code since presumably after you fetch the next 5 items, in the success handler you somehow use data.d.results to populate your table, and that code is missing. So, please use my code example just as an idea of how to do what I am talking about, and adapt it as necessary to fit your existing code.

$(document).ready(function () {
    $("#Next").click(function () {
        //clear body of table
        // has been moved into another function
        // so we don't need to do it here
        // $('tbody').empty();

        // increment the expected start index
        firstItemShownIdx += 5;

        // if we have gone back, then we don't necessarily
        // need to fetch new items from the server, we 
        // may already have them
        if (firstItemShownIdx < allItems.length) {
            // we're not trying to show more than we already have
            // so just redraw the table
            loadItemsInTable();
        } else {
            if (nextURL) {
                //Load next 5 items
                fetchDetails(nextURL)
            }
        }
    });

    $('#Back').click(function() {
        // decrement the expected start index
        firstItemShownIdx -= 5;

        // make sure you don't accidentally go below zero!
        if (firstItemShownIdx < 0) {
            firstItemShownIdx = 0;
        }
        // we have the previous items already stored,
        // so no need to fetch, just build the table
        loadItemsInTable()
    });

    // initial load of the first 5 items,
    // firstItemShownIdx is initialized as zero
    // so we don't need to set it, we just need to
    // fetch things using the original URL
    fetchDetails(URL);
});

var URL = siteURL + "/_api/web/lists/getByTitle('System')/items?$Top=5&$select=*&$orderby=Title asc";
var nextURL = "";

// create an array to store the items as you fetch them
var allItems = [];
// on the very first load, we obviously want to show the
// first 5 items, so we know our starting index will be zero
var firstItemShownIdx = 0;

function fetchDetails(URL) {
    ajax({
        url: URL,
        type: "GET",
        headers: {
            "Accept": "application/json;odata=verbose",
            "X-RequestDigest": $('#__REQUESTDIGEST').val()
        },
        success: function (data) {
            nextURL = data.d.__next;

            // store the new results so we can use them later
            // if we want to go back
            allItems.push(data.d.results);

            // if fetchDetails was called on initial load, the starting index
            // is already zero, if it was called through the "next" button click
            // then we have already incremented it by 5 in the click handler,
            // so our starting index is set, we just need to draw the new table
            loadItemsInTable();
        }
    });
}

function loadItemsInTable () {
    // clear the old items
    $('tbody').empty();

    // array.slice() creates a new copy of an array
    // and does not change the original, so allItems
    // will remain unchanged

    // get 5 items starting at the designated start index
    var itemsToShow = allItems.slice(firstItemShownIdx, firstItemShownIdx + 5);

    // do whatever you do to build your table
    // using the itemsToShow array
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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