How to Paginate and Sort Data with PHP - Mailbox Design Style ~ Coding Savvy
FB Twitter Google
» »

How to Paginate and Sort Data with PHP - Mailbox Design Style

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.
How to design mobile responsive website with HTML5, CSS3 and JQuery in a minute

Download Script Real Time live data Graph Plotting Application with AngularJs and PHP (Google Analytics, Adsense Style) 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.

<?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;
}
Then lastly we will convert the links into database query.
<?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;
}
Was this article helpful?
Thanks! Your feedback helps us improve tutorials.

You May Also Like...

No comments:

Post a Comment