Pagination is a crucial part of web development, It helps to save the loading time and also keeps data organized.
PHP as a dynamic programming language can be used to paginate and sort data in a webpage with just few lines of codes.
In this tutorial we are going to design a mailbox style design with CSS3 and use PHP to paginate and sort the messages coming from
the MySQL database. Sorting of data can be a tutorial on it's own but in combination with pagination will result in a powerful
dynamic and organized web design interface.
Download Script
Live Demo
First of all we need some helper function to do the sorting and paginating and also to help create the pagination and sorting links.
In order to geberate the pagination links we use this function inside the helper.php file.
<?php
function genPagelinks($sort,$cur_page,$num_pages) {
$page_links = '<ul class="mp">';
// If this page is not the first page, generate the "previous" link
if ($cur_page > 1) {
$page_links .= '<li class="active" ><a class="icon-left-big" href="?sort=' .$sort .'&page=' . ($cur_page - 1) . '"></a> </li>'; }
else {
$page_links .= '<li class="inactive icon-left-big"> </li>';
}
// Loop through the pages generating the page number links
for ($i = 1; $i <= $num_pages; $i++) {
if ($cur_page == $i) {
$page_links .= '<li class="inactive"> ' . $i.'</li>';
}
else {
$page_links .= ' <li class="active"><a href="?sort=' .$sort .'&page=' . $i . '"> ' . $i . '</a></li>'; }
}
// If this page is not the last page, generate the "next" link
if ($cur_page < $num_pages) {
$page_links .= '<li class="active" ><a class="icon-right-big" href="?sort=' .$sort .'&page=' . ($cur_page + 1) . '"></a></li>'; }
else {
$page_links .= '<li class="inactive icon-right-big"> </li>'; }
$page_links .="</ul>";
return $page_links;
}
For sorting This function will handle the linking and organization.
function genPagelinks($sort,$cur_page,$num_pages) {
$page_links = '<ul class="mp">';
// If this page is not the first page, generate the "previous" link
if ($cur_page > 1) {
$page_links .= '<li class="active" ><a class="icon-left-big" href="?sort=' .$sort .'&page=' . ($cur_page - 1) . '"></a> </li>'; }
else {
$page_links .= '<li class="inactive icon-left-big"> </li>';
}
// Loop through the pages generating the page number links
for ($i = 1; $i <= $num_pages; $i++) {
if ($cur_page == $i) {
$page_links .= '<li class="inactive"> ' . $i.'</li>';
}
else {
$page_links .= ' <li class="active"><a href="?sort=' .$sort .'&page=' . $i . '"> ' . $i . '</a></li>'; }
}
// If this page is not the last page, generate the "next" link
if ($cur_page < $num_pages) {
$page_links .= '<li class="active" ><a class="icon-right-big" href="?sort=' .$sort .'&page=' . ($cur_page + 1) . '"></a></li>'; }
else {
$page_links .= '<li class="inactive icon-right-big"> </li>'; }
$page_links .="</ul>";
return $page_links;
}
<?php
function genSortLinks($sort,$page) {
$sort_links = '';
switch ($sort) {
case 1:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-up-open" href = "?sort=2&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
break;
case 2:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
break;
case 3:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-up-open" href = "?sort=4&page='.$page.'">Date</a></th>';
break;
case 4:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
break;
case 5:
$sort_links .= '<th class="head1"><a class="icon-up-open" href = "?sort=6&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
break;
case 6:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
break;
case 7:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-up-open" href = "?sort=8&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
break;
default:
$sort_links .= '<th class="head1"><a class="icon-down-open" href = "?sort=5&page='.$page.'">Sender</a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=1&page='.$page.'">Subject</a></th>';
$sort_links .= '<th class="head1 attachement"><a class="icon-down-open" href = "?sort=7&page='.$page.'"><i class=" icon-attach"></i></a></th>';
$sort_links .= '<th class="head0"><a class="icon-down-open" href = "?sort=3&page='.$page.'">Date</a></th>';
}
return $sort_links;
}
<?php
function magSort($sort){
// Sort the search query using the sort setting
$srt ="";
switch ($sort) {
case 1:
$srt= " `subject`";
break;
case 2:
$srt= " subject DESC";
break;
case 3:
$srt= "`dated`";
break;
case 4:
$srt= "`dated` DESC";
break;
case 5:
$srt= " `sender` ";
break;
case 6:
$srt= " `sender` DESC";
break;
case 7:
$srt= " `attachement`";
break;
case 8:
$srt= " `attachement` DESC";
break;
default:
// No sort setting provided, so don't sort the query
}
return $srt;
}
function magSort($sort){
// Sort the search query using the sort setting
$srt ="";
switch ($sort) {
case 1:
$srt= " `subject`";
break;
case 2:
$srt= " subject DESC";
break;
case 3:
$srt= "`dated`";
break;
case 4:
$srt= "`dated` DESC";
break;
case 5:
$srt= " `sender` ";
break;
case 6:
$srt= " `sender` DESC";
break;
case 7:
$srt= " `attachement`";
break;
case 8:
$srt= " `attachement` DESC";
break;
default:
// No sort setting provided, so don't sort the query
}
return $srt;
}
Thanks!
Your feedback helps us improve tutorials.
No comments:
Post a Comment