jquery

jQuery Pagination Plugin

Before I know how to work with jqGrid plugin (table grid plugin for showing data), I was using jquery pagination plugin. It’s really easy to use. Let me show you how to work with it.

Let’s get to the point. How to use jquery pagination plugin, isn’t it? Yeah, I’ll show you in this small project.

You can download the plugin here. There’s two file pagination.css and pagination.js in the package. Include them in your page. Because it uses jQuery, as other plugin do, include both files after jquery script.

	<link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.16.custom.css"/>
	<link rel="stylesheet" type="text/css" media="screen" href="css/pagination.css"/>
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.pagination.js"></script>

We need an array as data container. If you know jqgrid, pagination jquery plugin use simpler array format. Some array like this :

[{“id”:”1″,”report_title”:”Polusi Udara”,”filename”:”2011_10_11_10_19_33_2.jpg”,”user_id”:”2″,”upload_time”:”2011-10-11″,”create_time”:”2011-08-08″}{“id”:”4″,”report_title”:”Penebangan Hutan”,”filename”:”2011_10_22_13_32_57_2.jpg””user_id”:”2″,”upload_time”:”2011-10-22″,”create_time”:”2011-08-08″}]

can be easily got by calling mysql_fetch_assoc from database table like this :

id, report_title, filename, user_id, upload_time, create_time

If you already have that array in your page, what you need to do next is showing them.

<script type="text/javascript">

	//Array of Element
	var reports = <?php server.php?u=1; ?>;
	var selectedReports = [];
	var report_per_page = 15;

	function selectReports(group){
		if (selectedReports) {selectedReports.length = 0;}
		$.each(group, function(index, instance){
			selectedReports.push(instance);
		});
	}

	function pageSelectCallback(page_index, jq){
		// init pagination
		var items_per_page = report_per_page;
		var initNo = (page_index * items_per_page)+1;
		var max_elem = Math.min((page_index+1) * items_per_page, selectedReports.length);

		getTableContent(page_index*items_per_page,max_elem,initNo);
		return false;
	}

	function firstPageSelect(){
		var items_per_page = report_per_page;
		var page_index = 0;
		var initNo = 1;
		var items_per_page = report_per_page;
		var max_elem = Math.min((page_index+1) * items_per_page, selectedReports.length);
		getTableContent(page_index*items_per_page,max_elem,initNo);
	}

	function getTableContent(init,max_elem,number){
		var newcontent = '<ul class="hoverbox">';

		for(var i=init;i<max_elem;i++)
		{
			var labelImg = '';
			var maxLabel = 16;
			if (selectedReports[i]["report_title"].length > maxLabel){
				labelImg = selectedReports[i]["report_title"].substr(0,maxLabel-3) + '...';
			}else{
				labelImg = selectedReports[i]["report_title"];
			}
			newcontent += '<li>'
						+'<a href="galeri/detail/'+selectedReports[i]["id"]+'">'
						+'<img src="<?php echo base_url(); ?>upload/thumb/thumb_'+selectedReports[i]["filename"]+'" alt="' + selectedReports[i]["report_title"] + '" title="' + selectedReports[i]["report_title"] + '" />'
						+'</a>'
						+'<br>'
						+'<label title="'+selectedReports[i]["report_title"]+'">' + labelImg + '</label>'
					+'</li>';
		}
		newcontent += '</ul>';
		$('#img-gallery').html(newcontent);
	}

	function getPaginationOption(){
		var initOption = {
			callback: pageSelectCallback,
			items_per_page:report_per_page,
			num_display_entries:4,
			num_edge_entries:1,
			prev_text: "Prev",
			next_text: "Next"
		}
		return initOption;
	}

	function generatePagination(){
		$("#pagination").pagination(selectedReports.length, getPaginationOption());
		firstPageSelect();
	}

	$(document).ready(function(){
		//init pagination
		selectReports(reports);
		generatePagination();
	});
</script>
<!-- They only need two <div>. One for content container, the other one for navigation panel. -->
<div class="gallery" id="img-gallery"></div>
<br style="clear:both;" />
<div id="pagination"></div>

Let me explain that code.

You only need two HTML div element. One div to contain where they will be showed up. The other div to show the navigation panel.

As for the javascript,

First, we generate array produced by php server, to variable reports. This variable will not be manipulated later. If you want to manipulate the array (remove some rows, etc), I hope you can use it on another array container. For this case, I have prepared function named :

selectReports(group)

so that pagination jquery plugin only need to access array named :

selectedReports

If you have another array you can use it by passing the array to selectReports parameter.

Second, to produce the pagination array you should remember this order

selectReports(reports);
generatePagination();

function selectReports fill array selectedReports so that the pagination can works with it. Beside function generatePagination will initiate the pagination.

$("#pagination").pagination(selectedReports.length, getPaginationOption());
firstPageSelect();

Actually we don’t need firstPageSelect() because to initiate the pagination we only need this line

$("#selector").pagination(arrayLength, option);

Unfortunately, by default, pagination jquery plugin doesn’t show the first page of pagination. Only after we hit another page, then back to first page the content of first page will be shown. I wonder why they make the plugin something like that.

Finally, if you want to change the id there’s two part that need changes :

Line :

$("#pagination").pagination(selectedReports.length, getPaginationOption());
and
$('#img-gallery').html(newcontent);

Some notes for you :

There are several options for pagination plugin :

callback: pageSelectCallback,
items_per_page:report_per_page,
num_display_entries:4,
num_edge_entries:1,
prev_text: "Prev",
next_text: "Next"

callback function is function that called when we hit navigation number.

  • items_per_page is number of items that will be showed per page.
  • num_display. If we have 10 pages, current pages will be followed up to this number. Eg. for example if current page is 7 of 20 then what shown in navigation panel is page 1,2….6,7,8,9….19,20
  • num_edge_entries. Let’s take previous example. If current page is 7 of 20 and this parameter is set 3 then what shown in navigation panel is page 1,2,3….6,7,8,9….18,19,20
  • prev_text is previous text button while next_text is next text button.

Warning!

If you works with big array data, with long size column I suggest that you don’t use pagination jquery plugin. Why? Of course, it’s because of performance. We don’t want people having their site run slowly, do we?

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s