I cannot apply CSS in html table - html

I cannot apply the CSS in the table. For example I want the table to be displayed in the middle and to change the font color and size as well. But I can't. Should I use the tbody tag since I have the body one? Also I generate the table data from database.
<?php
include 'connect.php';
$year = $_POST['year'];
$lecturer = $_POST['lecturer'];
$years = array(
2005,
2006,
2007
);
$lecturers = array(
'lec1',
'lec2',
'lec3',
'lec4'
);
if (in_array($lecturer, $lecturers) && in_array($year, $years)) {
$sql = "SELECT unit_name,a1,a2,a3,l1,l2,r1,r2,u1,u2,u3 FROM $lecturer WHERE year=$year";
$result = mysql_query($sql);
}
else {
echo "No data found";
}
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../statistics/style.css">
</head>
<body>
<div id="mytable">
<table width="900" border="1" cellspacing="1">
<tr>
<tbody>
<td>Unit Name</td>
<td>A1 </td>
<td>A2 </td>
<td>A3 </td>
<td>L1 </td>
<td>L2 </td>
<td>R1 </td>
<td>R2 </td>
<td>U1 </td>
<td>U2 </td>
<td>U3 </td>
</tbody>
</tr>
<?php
while($unit=mysql_fetch_assoc($result)){
echo "<tr>";
echo "<td>".$unit['unit_name']."</td>";
echo "<td>".$unit['a1']."</td>";
echo "<td>".$unit['a2']."</td>";
echo "<td>".$unit['a3']."</td>";
echo "<td>".$unit['l1']."</td>";
echo "<td>".$unit['l2']."</td>";
echo "<td>".$unit['r1']."</td>";
echo "<td>".$unit['r2']."</td>";
echo "<td>".$unit['u1']."</td>";
echo "<td>".$unit['u2']."</td>";
echo "<td>".$unit['u3']."</td>";
echo "</tr>";
}
?>
</table>
</div>
</body>
</html>
css:
<!-- principalLecturers
-->
#body{
color:white;
padding-bottom: 20px;
}
#table{
margin:0;
border-collapse: collapse;
color:#b50a1e;
font-family:verdana,arial,sans-serif;
font-size:10px;
}
#table#mytable{
display: table-row-group;
vertical-align: middle;
border-color: inherit
}

I can't see anywhere in your table <table id="table"...>. That's why the styles for #table {...} does not apply.

Related

How to customize bootstrap colors in a table

I created a CRUD system and am trying to customize it to make it look better using Bootstrap.
Currently I have the table striped with the "table-striped" class, however, I am trying to change the thead to a different color as I am not a fan of the options given, dark or light.
I also tried using CSS to customize it, but the browser doesn't seem to be loading the CSS even though it says it is linked in the sources.
<table class="table bg-light table-striped table-bordered table-hover rounded">
<thead>
<tr>
<th>ID</th>
<th>PO Number</th>
<th>Site Name</th>
<th>Date Created</th>
<th>Last Updated</th>
<th> </th>
</tr>
</thead>
<tbody>
<?php foreach($data['records'] as $row): ?>
<?php if(isset($data['flash']['id']) && (int) $row['id'] === $data['flash']['id']): ?>
<tr class="table-success">
<?php else: ?>
<tr>
<?php endif; ?>
<td>
<?= $row['id'] ?>
</td>
<td>
<?= $row['poNum'] ?>
</td>
<td>
<?= $row['site_name'] ?>
</td>
<td>
<?= $row['created_at'] ? (new DateTime($row['created_at']))->format('Y-m-d H:i:s') : '' ?>
</td>
<td>
<?= $row['updated_at'] ? (new DateTime($row['created_at']))->format('Y-m-d H:i:s') : '' ?>
</td>
<td>
<img src="img/pencil-square.svg" title="edit" alt="edit" />
<?php if ($_SESSION['userRole'] === 'ADMIN'): ?>
<a onclick="return confirm_delete(<?= $row['id'] ?>);" href="delete.php?id=<?= $row['id'] ?>&page=<?= $data['currentPage'] ?>"><img src="img/trash.svg" class="spacer" title="delete" alt="delete" /></a>
<?php endif; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
You can use this style:
th {
background-color: blue;
color: white;
}
I don't know how you test the CSS, but make sure it works by first using the CSS Internal. Put this code in the <head> tag and test if your CSS code works.
<style type="text/css">
th {
background-color: blue;
color: white;
}
</style>
After you make sure that it works, just transfer the code to an external CSS file.
If the CSS doesn't take effect, try to figure out if it's not overwritten by another CSS somewhere by looking in the browser's developer console.
So you can try this:
.rounded th {
background-color: blue;
color: white;
}
You can also use !important but it's a good practice to not use this !important keyword as it may cause some conflicts somewhere else.
th {
background-color: blue !important;
color: white;
}

Table & div image css issue

Now resolved and updated. The primary issue was a css clash.
I have made a table that displays images and the images change in the center div based on mouse enter with JQ but i cannot seem to get the image to fit the main cell.
The desired result is as each image appears in the center, it should fit into the space perfectly, but i noticed when using fixed pixel sizing there is an issue with browser compatibility and the layout varies. When i tried with percentages it again does not seem to work as intended.
I have tried using css % and fixed pixel h/w but neither work as intended.
Am i approaching the desired result in the incorrect manner?
All advice appreciated, thanks!
http://www.digitalterrorrecords.com/home/featureTable.php << example of the below code
The html
<div>
<table>
<tr>
<td>
<? // Stacked Left BEGIN ?>
<table class=''>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_1 ;?>'></img></td> <!-- Artwork 1 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_2 ;?>'></img></td> <!-- Artwork 2 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_3 ;?>'></img></td> <!-- Artwork 3 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_4 ;?>'></img></td> <!-- Artwork 4 -->
</tr>
</table>
<? // Stacked Left END ?>
</td>
<td>
<? // Main feature BEGIN ?>
<table>
<tr>
<td class='mainbox'>
<div>
<!--
<div> <? // LOAD BACKGROUND ?>
<img src='<? echo $ft_img_bg ;?>'></img>
</div>
-->
<div id='lf_1' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_1 ;?>'></img>
</div>
<div id='lf_2' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_2 ;?>'></img>
</div>
<div id='lf_3' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_3 ;?>'></img>
</div>
<div id='lf_4' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_4 ;?>'></img>
</div>
<div id='lf_5' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_5 ;?>'></img>
</div>
<div id='lf_6' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_6 ;?>'></img>
</div>
<div id='lf_7' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_7 ;?>'></img>
</div>
<div id='lf_8' class='messagepop'> <? // LOAD SELECTIONAL DIVS ?>
<img class='large_feat' src='<? echo $ft_fs_img_8 ;?>'></img>
</div>
`</div>
</td>
</tr>
</table>
<? // Main feature END?>
</td>
<? // Stacked Right BEGIN ?>
<td>
<table>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_5 ;?>'></img></td> <!-- Artwork 5 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_6 ;?>'></img></td> <!-- Artwork 6 -->
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_7 ;?>'></img></td> <!-- Artwork 7 -->
</tr>
<tr>
<td class='smallbox'><img class='small_feat' src='<? echo $ft_img_8 ;?>'></img></td> <!-- Artwork 8 -->
</tr>
</table>
</td><? // Stacked Right END?>
</tr>
</table>
</div>
The css
td div {
height: 100%;
}
.small_feat {
width: 200px;
height: 200px;
border: solid 2px #ffffff;
}
.large_feat {
width: 800px;
height: 800px;
}
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
position:absolute;
z-index:50;
}
.smallbox {
width: 200px;
height: 200px;
}
The JQ
$.fn.slideFadeToggle = function (easing, callback) {
return this.animate({
opacity: 'toggle',
width: 'toggle'
}, "fast", easing, callback);
};
$(function () {
function select($link) {
$('.contact').each(function(index, l) {
var $pane = $($(l).attr('href'));
if ($pane.is(':visible')) {
$pane.slideFadeToggle();
}
});
$('.contact').removeClass('selected');
$link.addClass('selected');
$($link.attr('href')).slideFadeToggle();
}
function deselect($link) {
$($link.attr('href')).slideFadeToggle(function () {
$link.removeClass('selected');
});
}
$('.contact').mouseenter(function () {
var $link = $(this);
if ($link.hasClass('selected')) {
deselect($link);
} else {
select($link);
}
return false;
});
$('.close').live('click', function () {
deselect();
return false;
});
});
This is probably be the last possible answer... Check this out !
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
position:relative;
z-index:50;
width:100%;
}
To fix your styling issue remove the absolute positioning style from the messagepop class in your CSS. When you use absolute positioning it takes the element out of the natural flow of the page and it will no longer respect the height and width constraints of the parent element.
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
z-index:50;
}
i have looked at your page source and you have
.large_feat
{
width: 100%;
}
.large_feat_main
{
width: 800px;
}
however, you don't have a class .large_feat_main applied anywhere.
you have the .large_feat applied so it is stretching the image 100%,
change the width to 800px or change the class.
thanks
Check this out. As mentioned earlier, position:absolute was the problem.
.messagepop {
background-color:#FFFFFF;
cursor:default;
display:none;
position:relative;
z-index:50;
width:100%;
}

adding logic in PHP for printing

I am just starting with PHP and having trouble of getting my page result to print right. I call the page below from index.php. It looks ok if I displayed the page on a monitor but when I print the page and it is more than one page, the section at the end of the page got cut off and continue on the second page. I am looking for a way so that when I print the page, it will look if the section (each item number) will fit the whole section (repair desc, common cause, etc) in that page. If it does not then just print on the next page.
I also included the CSS file. Basically what it does is forcing the width of page to fit a letter-size paper. Thank you in advance.
<?php include_once $_SERVER['DOCUMENT_ROOT'] .
'/fms/includes/helpers.inc.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Print Repair Form</title>
<link rel='stylesheet' type='text/css' href='/fms/css/letter-size.css' />
</head>
<body>
<div id="page-wrap">
<table>
<tr>
<td rowspan = "3" id="logo"><img src="/fms/images/flex_no_address_256.jpg" /></td>
<td rowspan = "3" id="address">Address<br />
City, State Zipcode <br />
Phone number <br />
website address
</td>
<td>
<table>
<tr>
<td id="repairinfo" class="theading" colspan = "2">Repair Detail</td>
</tr>
<tr>
<td><?php htmlout($custno); ?></td>
<td width="100px">WO: <?php htmlout($wonum); ?></td>
</tr>
<tr>
<td><?php htmlout($custname); ?></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<br />
<?php foreach($items as $item): ?>
<table border ="1">
<tr>
<td class="theading">Type of Repair</td>
<td class="theading">Repair ID</td>
<td class="theading">Fault Picture</td>
</tr>
<tr>
<td class="tablepadding"><?php htmlout($item['repairtype']); ?></td>
<td class="tablepadding"><?php htmlout($item['itemno']); ?></td>
<td rowspan="7" align="center">
<img src="/fms/images/wo_items/<?php htmlout($item['filename']); ?>" width="256" />
</td>
</tr>
<tr>
<td class="theading" colspan="2">Repair Description</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['repairdesc']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Common Causes</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['commoncause']); ?>
</td>
</tr>
<tr>
<td class="theading" colspan="2">Preventive Measures and Maintenance</td>
</tr>
<tr>
<td class="tablepadding" colspan="2"><?php htmlout($item['maintenance']); ?>
</td>
</tr>
</table>
<br />
<?php endforeach; ?>
</div>
</body>
</html>
CSS:
* { margin: 0; padding: 0;}
body {
font: 12px/1.4 Georgia, serif;
}
a img {
border: none;
}
#page-wrap {
width: 800px;
margin: 0 auto;
}
table {
width:100%;
}
#logo {
width: 256px;
}
#address {
width: 170px;
}
#repairinfo {
border-bottom: solid 1px;
text-align: center;
}
.theading {
font-weight: bold;
padding: 3px;
}
table tr td.tablepadding {
padding: 3px;
}
It should be achieved through CSS and no PHP, although you can use php as well as a workaround, google for css media.
There are some tricks for the CSS of your printing: http://slodive.com/web-development/css-print-page-tricks/
Can't give you specific details because I haven't worked too much with printings but it all comes to testing the total height that fits on the paper, and looking for a measure in php (maybe lines?) so if the size is bigger than the one you set, it creates another Table.
You could also use Javascript as you can detect element's (for example a table's) height, and call some function when the max height is reached.
Also I want to suggest you not using tables if it's not totally necesary, It's a very old-school approach and troublesome to modify, with more different behaviour across browsers, and with a lot more of unnecesary code.
Your issue is not with PHP but with CSS.
You need to include a print specific stylesheet as this will be different to your computer monitor styles.
Here's a good blog post about print CSS
http://www.webcredible.co.uk/user-friendly-resources/css/print-stylesheet.shtml
In your html the print stylesheet <link> element will need a media="print" attribute
Then in your print stylesheet you can specify a width

Boxes are tripping if I insert text in them

* RESOLVED BY INTENSE RESEARCHING *
[DOWNLOAD CODE, NO COPYRIGHT =)] .rar file ( always scan before opening .rar - F4LLCON
Problem is that without text the boxes are placed 2 on each row, but with text the boxes
appear under each other with spacing. To get the text in the boxes I used <style> in <head>.
How can I FIX this annoying problem?
IMAGE:
Without the p and h3, both echo text will appear under the box and not in the box
Code:
<style>
p {
position:relative;
top:-240px;
left:180px;
}
h3 {
position:relative;
top:-270px;
left:30px;
}
</style>
and
<div class="offers">
<div class="content_box">
<?php
while($products = mysql_fetch_array($result)) {
echo '<img src="includes/images/content_box.png" border=0/>';
// echo "<h3>" . $products['products'] . "</h3>";
// echo "<p>" . $products['description'] . "</p>";
}
?>
</div>
</div>
RESOLVED BY DOING:
<STYLE TYPE="text/css">
#title{color:red; padding-bottom: 240px; padding-left: 25px;}
#desc{color:blue; padding-bottom: 135px; padding-left: 5px;}
</STYLE>
</head>
and
<div>
<?php while($products = mysql_fetch_array($result)) {?>
<table align="left" background="includes/images/box.gif" width="473" height="285">
<tr>
<td width="35%" height="100%" id="title">
<?php echo $products['products'] . "&nbsp"; ?>
</td>
<td width="70%" height="100%" id="desc">
<?php echo $products['description'];?>
</td>
</tr>
</table>
<?php
}
?>
</div>
</body>
This might be easy for some, but I'm new to this.
Now working correctly.
Thank you for giving me directions and Thank you Google and Stackoverflow for so much help =)
I am asuming that content_box.png is the background for the box right?
instead of including it in a create it in the background of a div with a class like this
CSS:
.product_box {
bacground:url(includes/images/content_box.png);
width:xxxpx; /* the width of conrent_box.png */
height:xxxpx; /* the height of conrent_box.png */
position:relative;
float:left;
}
php:
<?php
while($products = mysql_fetch_array($result)) {
echo '<div class="product_box">';
// echo '<img src="includes/images/content_box.png" border=0/>';
echo "<h3>" . $products['products'] . "</h3>";
echo "<p>" . $products['description'] . "</p>";
echo '</div>';
}
?>
Hope it helps!

Why is this PHP loop rendering every row twice?

I'm working on a real frankensite here not of my own design. There's a rudimentary CMS and one of the pages shows customer records from a MySQL DB.
For some reason, it has no probs picking up the data from the DB - there's no duplicate records - but it renders each row twice.
<?php
$limit = 500;
$area = 'customers_list';
$prc = 'customer_list.php';
if($_GET['page'])
{
include('inc/functions.php');
$page = $_GET['page'];
}
else
{
$page = 1;
}
$limitvalue = $page * $limit - ($limit);
$customers_check = get_customers();
$customers = get_customers($limitvalue, $limit);
$totalrows = count($customers_check);
?>
<!-- pid: customer_list -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="float: left; margin-bottom: 20px;">
<tr>
<td class="col_title" width="200">Name</td>
<td></td>
<td class="col_title" width="200">Town/City</td>
<td></td>
<td class="col_title">Telephone</td>
<td></td>
</tr>
<?php
for ($i = 0; $i < count($customers); $i++)
{
?>
<tr>
<td colspan="2" class="cus_col_1"><?php echo $customers[$i]['surname'].', '.$customers[$i]['first_name']; ?></td>
<td colspan="2" class="cus_col_2"><?php echo $customers[$i]['town']; ?></td>
<td class="cus_col_1"><?php echo $customers[$i]['telephone']; ?></td>
<td class="cus_col_2">
<a href="javascript: single_execute('prc/customers.prc.php?delete=yes&id=<?php echo $customers[$i]['customer_id']; ?>')" onClick="return confirmdel();" class="btn_maroon_small" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_maroon_small_left">
<div class="btn_maroon_small_right">Delete Account</div>
</div></a>
<a href="customer_edit.php?id=<?php echo $customers[$i]['customer_id']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Edit Account</div>
</div></a>
<a href="mailto: <?php echo $customers[$i]['email']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Email Customer</div>
</div></a>
</td>
</tr>
<tr><td class="col_divider" colspan="6"></td></tr>
<?php
};
?>
</table>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="pagination_holder">
<?php
if($page != 1)
{
$pageprev = $page-1;
?>
Previous
<?php
}
else
{
?>
<div class="pagination_left, page_grey">Previous</div>
<?php
}
?>
<div class="pagination_middle">
<?php
$numofpages = $totalrows / $limit;
for($i = 1; $i <= $numofpages; $i++)
{
if($i == $page)
{
?>
<div class="page_number_selected"><?php echo $i; ?></div>
<?php
}
else
{
?>
<?php echo $i; ?>
<?php
}
}
if(($totalrows % $limit) != 0)
{
if($i == $page)
{
?>
<div class="page_number_selected"><?php echo $i; ?></div>
<?php
}
else
{
?>
<?php echo $i; ?>
<?php
}
}
?>
</div>
<?php
if(($totalrows - ($limit * $page)) > 0)
{
$pagenext = $page+1;
?>
Next
<?php
}
else
{
?>
<div class="pagination_right, page_grey">Next</div>
<?php
}
?>
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// END PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
I'm not the world's best PHP expert but I think I can see an error in a for loop when there is one... But everything looks ok to me. You'll notice that the customer name is clickable; clicking takes you to another page where you can view their full info as held in the DB - and for both rows, the customer ID is identical, and manually checking the DB shows there's no duplicate entries. The code is definitely rendering each row twice, but for what reason I have no idea.
All pointers / advice appreciated.
Like jayrub wrote, StackOverflow is probably more appropriate for this.
But since you've already asked it, I'll make these recommendations:
1.) Use foreach() to look through arrays like this:
foreach ($customers as $i => $customer) {
echo $customer['name'];
...
}
2.) Use var_dump() as Zoredache suggests, on $customers and $customers_check.
3.) Use semantic markup; so, for tables, you'll want something like:
<table>
<thead>
<tr>
<th>Name</th>
<th>Town</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<!-- your php code here -->
</tbody>
</table>
This will make it easier for screen readers and also make it easier to use certain scripts to generate rich web interfaces. See this page for more info: http://www.ferg.org/section508/accessible_tables.html
4.) Oh, and avoid inline CSS as much as possible. It's just bad form.
Try the following, this is an updated version of your code.
Please read the comments that I made in it, this is just a sample of some good practices.
<?php
$limit = 500;
$area = 'customers_list';
$prc = 'customer_list.php';
if($_GET['page'])
{
include('inc/functions.php');
$page = (int)$_GET['page']; // safety (page always needs to be an integer
}
else
{
$page = 1;
}
$limitvalue = $page * $limit - ($limit);
$customers_check = get_customers();
$customers = get_customers($limitvalue, $limit);
$totalrows = count($customers_check);
?>
<!-- pid: customer_list -->
<table border="0" width="100%" cellpadding="0" cellspacing="0" style="float: left; margin-bottom: 20px;">
<tr>
<td class="col_title" width="200">Name</td>
<td></td>
<td class="col_title" width="200">Town/City</td>
<td></td>
<td class="col_title">Telephone</td>
<td></td>
</tr>
<?php
foreach($customers as $i => $customer) // foreach is easier to use, manage and troubleshoot
{
?>
<tr>
<td colspan="2" class="cus_col_1"><?php echo $customer['surname'].', '.$customer['first_name']; ?></td>
<td colspan="2" class="cus_col_2"><?php echo $customer['town']; ?></td>
<td class="cus_col_1"><?php echo $customer['telephone']; ?></td>
<td class="cus_col_2">
<a href="javascript: single_execute('prc/customers.prc.php?delete=yes&id=<?php echo $customer['customer_id']; ?>')" onClick="return confirmdel();" class="btn_maroon_small" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_maroon_small_left">
<div class="btn_maroon_small_right">Delete Account</div>
</div></a>
<a href="customer_edit.php?id=<?php echo $customer['customer_id']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Edit Account</div>
</div></a>
<a href="mailto: <?php echo $customer['email']; ?>" class="btn_black" style="margin: 0px; float: right; margin-right: 10px;"><div class="btn_black_left">
<div class="btn_black_right">Email Customer</div>
</div></a>
</td>
</tr>
<tr><td class="col_divider" colspan="6"></td></tr>
<?php
}
?>
</table>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<div class="pagination_holder">
<?php
if($page != 1)
{
$pageprev = $page-1;
?>
Previous
<?php
}
else
{
?>
<div class="pagination_left, page_grey">Previous</div>
<?php
}
?>
<div class="pagination_middle">
<?php
$numofpages = $totalrows / $limit;
if(($totalrows % $limit) != 0) // using this avoids the second for-loop (avoids redundant code)
$numofpages++;
for($i = 1; $i <= $numofpages; $i++)
{
if($i == $page)
{
?>
<div class="page_number_selected"><?php echo $i; ?></div>
<?php
}
else
{
?>
<?php echo $i; ?>
<?php
}
}
?>
</div>
<?php
if(($totalrows - ($limit * $page)) > 0)
{
$pagenext = $page+1;
?>
Next
<?php
}
else
{
?>
<div class="pagination_right, page_grey">Next</div>
<?php
}
?>
</div>
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->
<!--// END PAGINATION-->
<!--///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////-->