|
Instead of showing the complete list of all data records in one page, you may want to chop the list into smaller pages and let the user to navigate through. There are three challenges involved in display paging:
n Display only the records on the requested page.
n Construct the page navigation bar based on the record set and page size.
n Carry the record set across pages.
BEE does the above in a neat and simple way. The "seek" parameter of the "database" command accept three numbers as its value: The record to seek, number of records per page and number pages per block (a block is the collection of pages contained in a page navigation bar.)
database "phbook" action="select" seek="71,10,5";
In the above example, the record set is pre-positioned at 71, which means the next retrieval will be the 71st record. Each page contains 10 records and at most 5 pages are listed in the page bar. When displaying the records, you need to limit to one page only. This is done by the "maxiter" parameter in the foreach loop. This answers the first challenge.
foreach maxiter=10 ((db)phbook as rec) {
// Display one record
...
}
The second challenge is the page bar, and that is done automatically through the "pagebar" variable.
A typical navigation bar contains links to all pages contained in the block, plus some short-cut links to the first page, previous block, previous page (back), next page (forward), the next block and the last page. You can specify how each of these components would look and the link it jumps to:
var href = "href={sys%url:page}?record=@record";
var phbook%pagebar:first = "<a {href}>|<<</a>";
var phbook%pagebar:previous = "<a {href}><<</a>";
var phbook%pagebar:back = "<a {href}><-</a>";
var phbook%pagebar:page = "<a {href}>@page</a>";
var phbook%pagebar:sought = "<b>@page</b>";
var phbook%pagebar:forward = "<a {href}>-></a>";
var phbook%pagebar:next = "<a {href}>>></a>";
var phbook%pagebar:last = "<a {href}>>>|</a>";
Note: The {href} variable is not part of the database object (phbook). It is only a local variable to simplify the coding.
The "pagebar" variable should be defined before the "database" command with "seek". To show the page bar, you can do:
display "{phbook%page|list:(@value) ()}";
// For record 71 with 200 records in the record set,
// display |<< << <- 6 7 8 9 10 -> >> >>|
// hyperlink record= 1 41 61 51 61 81 91 81 101 191
Now the third challenge: After you click the link, another query needs to be sent. (Yes, every page is a new query, as the web server may not be able to keep the database access as a persistent connection.)
There are many ways to do this. For example, you can include all form entries (sys%form) into the "href" variable, or you can save the query into a session variable so that the next page run will be able to retrieve the query string and use it to get the new page.
The session variable is proven to be an easier way to carry the record set across pages. BEE makes it easier by automatically saving the query into a session variable for you: session%database:select. Unlike the %query variable, this session variable is available only if the "database" command is successful.
In the code, you need to detect whether the "record" form entry is present (via the record=@record argument in the "href" variable.) If it does, it is from the page bar link and you should use the session%database:select variable in the query. Otherwise, it is a new query, and you should use the "action" parameter to re-generate the record set.
Putting the whole thing together, you'll have the following. (Note: some tricks are used to hold the form entry values. These are useful but not part of the "database" example.)
<form>
Name: <input type=text name=Name size=20 value="${sys%form:Name}"><br>
Height:
From <input type=text name=FromHeight size=5 value="${sys%form:FromHeight}">
To <input type=text name=ToHeight size=5 value="${sys%form:ToHeight}">
<br>
<bee var="selected:{sys%form:orderby}" value=selected>
<select name=orderby>
<option value="" ${selected:}>--Order by--</option>
<option value="Name" ${selected:Name}>Name</option>
<option value="Birthday, Name"
${selected:Birthday, Name}>Birthday, then Name</option>
<option value="Height" ${selected:Height}>Height</option>
<option value="Height desc"
${selected:Height desc}>Height (decreasing)</option>
</select>
<input type=submit name=submit value=Go>
</form>
<script language="bee">
// About the table
var phbook%table = "PhoneBook";
var phbook%orderby = "{sys%form:orderby}";
var phbook%decode:Birthday = "strftime:%d/%m/%Y";
// About the search
var phbook%match:Name = "regexp:Name";
var phbook%match:FromHeight = "min:Height";
var phbook%match:ToHeight = "max:Height";
var phbook%search:Name = "{sys%form:Name}";
var phbook%search:FromHeight = "{sys%form:FromHeight}";
var phbook%search:ToHeight = "{sys%form:ToHeight}";
// About the page bar
var href = "href={sys%url:page}?record=@record";
var phbook%pagebar:first = "<a {href}>|<<</a>";
var phbook%pagebar:previous = "<a {href}><<</a>";
var phbook%pagebar:back = "<a {href}><-</a>";
var phbook%pagebar:page = "<a {href}>@page</a>";
var phbook%pagebar:sought = "<b>@page</b>";
var phbook%pagebar:forward = "<a {href}>-></a>";
var phbook%pagebar:next = "<a {href}>>></a>";
var phbook%pagebar:last = "<a {href}>>>|</a>";
var recordsperpage = 5;
var pagesperblock = 3;
var rec = "{sys%form:record}";
if ({#rec:} > 0) {
database "phbook" query="{session%database:select}"
seek="{rec},{recordsperpage},{pagesperblock}";
} else {
var rec = 1;
database "phbook" action="select"
seek="{rec},{recordsperpage},{pagesperblock}";
}
display "{phbook%page|list:(@value) ()}";
</script>
<table>
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Tel</b></td>
<td><b>Height</b></td>
<td><b>Birthday</b></td>
</tr>
<beeforeach maxiter="{recordsperpage}" source="(db)phbook" var="rec">
<tr>
<td>${rec:ID}</td>
<td>${rec:Name}</td>
<td>${rec:Tel}</td>
<td>${rec:Height}</td>
<td>${rec:Birthday}</td>
</tr>
</beeforeach>
</table>
<hr>
Record ${phbook%first:rip} to ${phbook%last:rip}
(${phbook%count:rip} out of ${phbook%last:record})<br>
|