In practice, developers often encounter the situation when a page needs to display a set of items (products, users etc) on sepparate pages which can be accessed using the previous/next navigation links. All though it is not a difficult matter, if you’re implementing this in a page that uses smarty templates, it might seem more difficult to implement. This article discusses how you can display an array of items on pages, each page containing a set amount of items using Smarty for formatting the items, and later on jQuery for navigating between pages.

Smarty can be a very useful tool for any number of tasks, of varying complexity. Let’s consider for example a page in which a set of items needs to be displayed on sepparate pages, and navigation is done using two buttons/links for next and previous page. The way in which the items are managed will not be discussed, but we assume we use a script for retrieving them in the form of an array, and assigning that array to a Smarty variable.

So, once we have the array, and the template displayed, it’s time to render the items. Having a set amount of items visible per page, we need to check after each item if that cap has been reached, we store to displayed items in a container, and then create a new one for the remaining items. This process is repeated until the whole array has been parsed. The following code segment does just that. It uses an array assigned to smarty with PHP, and a variable containing the number of items.

Using {foreach}, we parse the array and display the items. We’ll need to use a counter in order to determine the number of items displayed and for checking if the page item cap has been reached. That same counter can be used to tracking not only items, but pages also, this way we can have a nice current page/total pages display. Fortunatelly, Smarty makes this task very easy with the {counter} command. We just assign it a name, and then we can use the counter value as a Smarty variable.

The next thing to do, since we are rendering the items in one go, is to check if the page item limit has been reached. For simplicity and ease of reading, we will consider an arbitrary value, of 20 items per page. If this limit has been reached, we just close the previous item container/page, and open a new one. In order to define pages, we’ll use <div>’s. We then add the page display on top, for navigation. T prevoius/next elements can be styled in any number of ways like text, images, buttons etc.

After this check has been done, we render the current item.

The last detail to take into account when using this method is the fact that in the main item loop checks if a set amount if items has been rendered and excepts a container to be opened before it starts to parse the array, that’s why we close a container first, and then open a new one in the loop. Since the opening operation is the last one, we’ll need to close the last container after the items have been rendered.

Here is the code:

<div id="page1" class="productSinglePage">
	{foreach from=$items item=item}
		{counter assign=itemCounter}
 
		{if $itemCounter % 20 == 0}
			</div>
			<div id="page{$itemCounter/20}" class="itemSinglePage">
				<div align="center">
					{if $itemCounter/20+1 > 1}
					<span class="pageNav" id="pageNav{$itemCounter/20-1}">
						«
					</span>
					{/if}
					Page: {$itemCounter/20+1} / {$numItems}
					{if $itemCounter/20+1 < $numItems}
					<span class="pageNav" id="pageNav{$itemCounter/20+1}">
						»
					</span>
					{/if}
				</div>
				<br /><br />
		{/if}
		<a href="[link to item page]">
		[Item name and/or picture]
		</a>
	{/foreach}
</div>

So there we are. The variables used are as follows: $items is an array assigned to Smarty via PHP, $item is the current item that is beign rendered within the page, and $itemCounter is a variable created using {counter} in order to keep track of items and pages.

But this is only half of the matter. Now that we have the pages, they are useless if a user can’t navigate between them. We can implement a navigation menu using jQuery. So, following the last post about togglers implemented with jQuery, we can use the same principle here. By assigning each page container an id, we can link that element with a class of items that has an event attached to it. So, we have a single function for any number of items in that specific class. It works because each navigation element (next/previous) also has an id which links the element to the corresponding page container. That way, when a user clicks on a navigation element, the function gets its id, and the displays the page which has that id as well. In its simplest form the functon will just manipulate the css dispaly property of a page, for showing and hiding. We can use any number of effects in different circumstances, but this gets the job done:

$('.pageNav').click(
	function()
	{
		id = $(this).attr('id').substr(7);
 
		$('.productSinglePage').css('none', block);
		$('#page' + id).css('display', 'block');
	}
);