Navigating the data using JDE

JDE gateway accepts following variables that can be sent using both GET and POST methods:

In this article we’ll show practical use of dbBee_mr and dbBee_sr variables to limit the number of records per request and to paginate the records (spreading result out over pages to make it easier to view).

We will use the same code used in previous blog with few minor modifications to existing code and adding some new lines:

<script>
var maxrec = 10;
var startrec=1;
var rc=0;
function MakeNavigation(){
var pg=1;
var curpg=parseInt(startrec / maxrec)+(parseInt(startrec / maxrec)==startrec / maxrec?0:1);
NavSel='<select id="SelPage" size="1" onchange="startrec=this.options[this.selectedIndex].value;loadJSON();">';
for(i=1;i<=rc;i+=maxrec){
NavSel+='<option value="'+i+'">Go to page '+(pg++)+'</option>';
}
NavSel+="</select>";
document.getElementById("demo").innerHTML += NavSel;
document.getElementById("SelPage").value=(curpg-1)*maxrec+1;
document.getElementById("SelPage").options[document.getElementById("SelPage").selectedIndex].text = "Current page "+curpg; 
}
function loadJSON(){
$.getJSON('https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksJSONjsonapi.wbsp?dbbee_sr='+startrec+'&dbbee_mr='+maxrec, function (data) {
    var tHTML="The search returned "+data.BooksCount + " records<br/>";
    rc=parseInt(data.BooksCount);
    for(var i in data.Books){
    tHTML += data.Books[i].Image+"<h1>" +
    data.Books[i].Title +
    "</h1><h2>" +
    data.Books[i].Author +
    "</h2><h2>" + 
    data.Books[i].Publisher +
    "</h2><h3>" +
    data.Books[i]['Year Published'] +
    "</h3><hr>";
    }
    document.getElementById("demo").innerHTML = tHTML;
    MakeNavigation();
    
  });
  }
loadJSON();
</script>
<div id="demo"></div>

We marked all the new stuff with red, so it is easier to track. First let’s check what we have modified in code we used in previous article:

$.getJSON('https://thyme.dbbee.com/u/SGCEQ5WZFZ/BooksJSONjsonapi.wbsp?dbbee_sr='+startrec+'&dbbee_mr='+maxrec

As you can see, we added dbBee variables dbbee_sr and dbbee_mr to the URL, so dbBee will send us only partial response, starting with record number defined in dbbee_sr and containing maximum of records defined in dbbee_mr.

Now about the new stuff - you’ll notice that we added three global variables: startrec, maxrec and rc and we added one new function MakeNavigation(). We set startrec value to 1, so initial display starts with first record. We set maxrec to 10, so our single page will contain maximum of 10 records. Variable rc is actual record counter and it has to be global because its value is modified by function loadJSON() and used by function MakeNavigation().

Function MakeNavigation() builds drop down select element to be used for navigating through pages.

Line var curpg=parseInt(startrec / maxrec)+(parseInt(startrec / maxrec)==startrec / maxrec?0:1); calculates the number of current page (so we can set dropdown selection box to proper value and change the option text).

Next block uses for loop to create selection box and the code below that sets its value to reflect the current page.

Please note that selection box has hooked onchange event onchange="startrec=this.options[this.selectedIndex].value;loadJSON();" that changes startrec variable to selected value of selection box and executes loadJSON() function to resend the request with new dbBee_sr value.
For live demo please click here.

Now, when we have solved the pagination we only need some sort of search form to have fully featured database search application without a single line of backend programming (that part is taken care of by dbBee).
Creating the search form is covered in our next article.

Related blogs

Querying the data using JDE

In this article we’ll show practical use of dbBee_sql variable to filter the records using search criteria.

Connecting dbBee JDE with host page using jQuery

In this article we’ll give you basic instructions on how to connect JDE with your host page.

Building JSON data exchange project using JDE wizard

JDE project creates a gateway for serving data stored in your Excel Sheet or Access Table as a JSON document that can easily be fetched using AJAX with JavaScript or jQuery.