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
}
