SELECT * FROM Vzakladke.net

Статьи об автоматизации и программировании


Постраничная навигация на PHP

 

 

Простая постраничная навигация на PHP. 

Этот способ хорош тем что он процедурный, но если Вы сторонник ООП, то Вы конечно сможете засунуть эту функцию как метод в свой класс. В данной статье приводится реальный рабочий код, для которого разработано сразу несколько стилей.

 

Подключение к базе db.php:

    $db = @mysql_connect('localhost', 'Имя пользователя БД', 'Пароль БД') or die(mysql_error());
    @mysql_select_db('Название БД', $db) or die(mysql_error());
 

Функция навигации function.php

   function pagination($query, $per_page = 10,$page = 1, $url = '?'){        
    	$query = "SELECT COUNT(*) as `num` FROM {$query}";
    	$row = mysql_fetch_array(mysql_query($query));
    	$total = $row['num'];
        $adjacents = "2"; 

    	$page = ($page == 0 ? 1 : $page);  
    	$start = ($page - 1) * $per_page;								
		
    	$prev = $page - 1;							
    	$next = $page + 1;
        $lastpage = ceil($total/$per_page);
    	$lpm1 = $lastpage - 1;
    	
    	$pagination = "";
    	if($lastpage > 1)
    	{	
    		$pagination .= "<ul class='pagination'>";
                    $pagination .= "<li class='details'>Страница $page из $lastpage</li>";
    		if ($lastpage < 7 + ($adjacents * 2))
    		{	
    			for ($counter = 1; $counter <= $lastpage; $counter++)
    			{
    				if ($counter == $page)
    					$pagination.= "<li><a class='current'>$counter</a></li>";
    				else
    					$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";					
    			}
    		}
    		elseif($lastpage > 5 + ($adjacents * 2))
    		{
    			if($page < 1 + ($adjacents * 2))		
    			{
    				for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++)
    				{
    					if ($counter == $page)
    						$pagination.= "<li><a class='current'>$counter</a></li>";
    					else
    						$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";					
    				}
    				$pagination.= "<li class='dot'>...</li>";
    				$pagination.= "<li><a href='{$url}page=$lpm1'>$lpm1</a></li>";
    				$pagination.= "<li><a href='{$url}page=$lastpage'>$lastpage</a></li>";		
    			}
    			elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2))
    			{
    				$pagination.= "<li><a href='{$url}page=1'>1</a></li>";
    				$pagination.= "<li><a href='{$url}page=2'>2</a></li>";
    				$pagination.= "<li class='dot'>...</li>";
    				for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++)
    				{
    					if ($counter == $page)
    						$pagination.= "<li><a class='current'>$counter</a></li>";
    					else
    						$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";					
    				}
    				$pagination.= "<li class='dot'>..</li>";
    				$pagination.= "<li><a href='{$url}page=$lpm1'>$lpm1</a></li>";
    				$pagination.= "<li><a href='{$url}page=$lastpage'>$lastpage</a></li>";		
    			}
    			else
    			{
    				$pagination.= "<li><a href='{$url}page=1'>1</a></li>";
    				$pagination.= "<li><a href='{$url}page=2'>2</a></li>";
    				$pagination.= "<li class='dot'>..</li>";
    				for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++)
    				{
    					if ($counter == $page)
    						$pagination.= "<li><a class='current'>$counter</a></li>";
    					else
    						$pagination.= "<li><a href='{$url}page=$counter'>$counter</a></li>";					
    				}
    			}
    		}
    		
    		if ($page < $counter - 1){ 
    			$pagination.= "<li><a href='{$url}page=$next'>Следующая</a></li>";
                $pagination.= "<li><a href='{$url}page=$lastpage'>Последняя</a></li>";
    		}else{
    			$pagination.= "<li><a class='current'>Следующая</a></li>";
                $pagination.= "<li><a class='current'>Последняя</a></li>";
            }
    		$pagination.= "</ul>\n";		
    	}
    
    
        return $pagination;
    } 

 

Создаем базу данных и наполняем ее:

CREATE TABLE IF NOT EXISTS `records` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) CHARACTER SET cp1251 COLLATE cp1251_general_ci NOT NULL,
  `active` int(11) NOT NULL DEFAULT '1',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=cp1251 AUTO_INCREMENT=27;

--
-- Dumping data for table `records`
--

INSERT INTO `records` (`id`, `name`, `active`) VALUES
(1, 'Emily', 1),
(2, 'Kayla', 1),
(3, 'Alyssa', 1),
(4, 'Chloe', 1),
(5, 'Hannah', 1),
(6, 'Ashley', 1),
(7, 'POPPY', 1),
(8, 'BETHANY', 1),
(9, 'JASMINE', 1),
(10, 'ELIZABETH ', 1),
(11, 'ALEC', 1),
(12, 'ALFRED', 1),
(13, 'ALLYN', 1),
(14, 'ALTON', 1),
(15, 'ALYCE', 1),
(16, 'ALYX', 1),
(17, 'AMERY', 1),
(18, 'AMIE', 1),
(19, 'AMITY', 1),
(20, 'ANDI', 1),
(21, 'ANDIE', 1),
(22, 'ANGEL', 1),
(23, 'ARIC ', 1),
(24, 'ARN', 1),
(25, 'ARYANA ', 1),
(26, 'AILA', 1);

 

Далее описываем наш главный файл index.php. В начале подключаем функцию и базу, определяем переменные:

    include (' db.php '); 
    include (' function.php ');

    	$page = (int) (!isset($ _GET ["page"]) ? 1 : $ _GET ["page"]);
    	$limit = 2;
    	$startpoint = ($page * $limit) - $limit;
        
        // таблица для выборки
        $statement = "`records` where `active` = 1";

 

Теперь показываем записи:

    <div class="records round">
        < ? php
            //Показываем записи
            $query = mysql_query("SELECT * FROM {$statement} LIMIT {$startpoint} , {$limit}");
            
            while ($row = mysql_fetch_assoc($query)) {
        ? >
            <div class="record round">< ? php echo "{$row['id']}#{$row['name']}";? ></div>
        < ? php    
            }
        ? >
    </div>

 

Выводим постраничную навигацию:

< ? php
    echo pagination($statement,$limit,$page);
? >

 

Остается задать стиль для нашей навигации. Обратимся к заголовку <head></head> страницы:

    <link href="css/pagination.css" rel="stylesheet" type="text/css" />
    <link href="css/grey.css" rel="stylesheet" type="text/css" />

    <style type="text/css">
        .records {
            width: 615px;
            margin: 5px;
            padding:2px 5px;
            border:1px solid #B6B6B6;
        }
        
        .record {
            color: #474747;
            margin: 5px 0;
            padding: 3px 5px;
            background:#E6E6E6;  
            border: 1px solid #B6B6B6;
            cursor: pointer;
            letter-spacing: 2px;
        }
        .record:hover {
            background:#D3D2D2;
        }
        
        
        .round {
            -moz-border-radius:8px;
            -khtml-border-radius: 8px;
            -webkit-border-radius: 8px;
            border-radius:8px;    
        }       
    </style>

 

 

Содержание главного файла стилей pagination.css:

ul.pagination{
    margin:0px;
    padding:0px;
    height:100%;
    overflow:hidden;
    font:12px 'Tahoma';
    list-style-type:none;    
}

ul.pagination li.details{
    padding:7px 10px 7px 10px;
    font-size:14px;
}

ul.pagination li.dot{padding: 3px 0;}

ul.pagination li{
    float:left;
    margin:0px;
    padding:0px;
    margin-left:5px;
}

ul.pagination li:first-child{
    margin-left:0px;
}

ul.pagination li a{
    color:black;
    display:block;
    text-decoration:none;
    padding:7px 10px 7px 10px;
}

ul.pagination li a img{
    border:none;
}

 

Далее подключаем наш собственный стиль grey.css:

ul.pagination li.details{
   color:#888888;
}

ul.pagination li a
{
    color:#FFFFFF;
    border-radius:3px;    
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

ul.pagination li a
{
    color:#474747;
    border:solid 1px #B6B6B6;
    padding:6px 9px 6px 9px;
    background:#E6E6E6;
    background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
    background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
}    

ul.pagination li a:hover,
ul.pagination li a.current
{
    background:#FFFFFF;
}

 

Приведем далее и другие варианты стилей:

red.css

 

    ul.pagination li.details{
       color:#AD2D2D;
    }
    
    ul.pagination li a
    {
        border:solid 1px;
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #EDEDED;
        -moz-box-shadow:0px 1px #EDEDED;
        -webkit-box-shadow:0px 1px #EDEDED;
    }
    
    ul.pagination li a
    {
        color:#E92F2F;
        border-color:#FFA5A5;
        background:#FFF8F8;
    }    
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {
        text-shadow:0px 1px #B72E2E;
        border-color:#AD2D2D;
        background:#E43838;
        background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));
    }    

 

 

A_green.css

    ul.pagination li.details{
       color:#699613;
    }
    
    ul.pagination li a
    {
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }

    ul.pagination li a
    {
        color: #fff;
        background:#699613;
        background:-moz-linear-gradient(top,#87AB19,#699613);
        background:-webkit-gradient(linear,0 0,0 100%,from(#87AB19),to(#699613));    
    }    
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {
        color:#4F7119;
        background:#E7F2C7;
    }

 

A_red.css

    ul.pagination li.details{
       color:#D22020;
    }
    
    ul.pagination li a
    {
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }

    ul.pagination li a
    {      
        color: #fff;   
        background:#D22020;
        background:-moz-linear-gradient(top,#DB2B2B,#D22020);
        background:-webkit-gradient(linear,0 0,0 100%,from(#DB2B2B),to(#D22020));    
    }    
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {
        color:#9F0F0F;
        background:#FFE0E0;
    }

 

A_yellow.css

    ul.pagination li.details{
       color:#C59E08;
    }
    
    ul.pagination li a
    {
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }

    ul.pagination li a
    {
        color:#893A00;
        background:#FFCB00;
        background:-moz-linear-gradient(top,#FFD500,#FFCB00);
        background:-webkit-gradient(linear,0 0,0 100%,from(#FFD500),to(#FFCB00));    
    }    
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {
        background:#FFF4BA;
    }   

 

B_black.css

    ul.pagination li.details{
       color:#202020;
    }
    ul.pagination li a
    {
        border:solid 1px;
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #EDEDED;
        -moz-box-shadow:0px 1px #EDEDED;
        -webkit-box-shadow:0px 1px #EDEDED;
        text-shadow:0px 1px #3C3C3C;
        border-color:#202020;
        background:#525252;
        background:-moz-linear-gradient(top,#9F9F9F 1px,#6C6C6C 1px,#525252);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9F9F9F),color-stop(0.02,#6C6C6C),color-stop(1,#525252));        
    }
    ul.pagination li a
    {
        color:#444444;
        border-color:#BEBEBE;
        background:#FAFAFA;
    }    
   

 

B_blue.css

    ul.pagination li.details{
       color:#3390CA;
    }
    ul.pagination li a
    {
        border:solid 1px;
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #EDEDED;
        -moz-box-shadow:0px 1px #EDEDED;
        -webkit-box-shadow:0px 1px #EDEDED;
        text-shadow:0px 1px #388DBE;
        border-color:#3390CA;
        background:#58B0E7;
        background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#B4F6FF),color-stop(0.02,#63D0FE),color-stop(1,#58B0E7));        
    }
    ul.pagination li a
    {
        color:#0A7EC5;
        border-color:#8DC5E6;
        background:#F8FCFF;
    }    

 

B_red.css

    ul.pagination li.details{
       color:#AD2D2D;
    }
    
    ul.pagination li a
    {
        border:solid 1px;
        border-radius:3px;    
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        padding:6px 9px 6px 9px;
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a
    {
        color:#E92F2F;
        border-color:#FFA5A5;
        background:#FFF8F8;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #EDEDED;
        -moz-box-shadow:0px 1px #EDEDED;
        -webkit-box-shadow:0px 1px #EDEDED;
        text-shadow:0px 1px #B72E2E;
        border-color:#AD2D2D;
        background:#E43838;
        background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));        
    }
        

C_green.css

    ul.pagination li.details{
       color:#478223;
    }
    
    ul.pagination li a
    {
        color:#333333;
        text-shadow:0px 1px #F6F6F6;
        padding:6px 9px 6px 9px;
        border:solid 1px #B6B6B6;
        box-shadow:0px 1px #EFEFEF;
        -moz-box-shadow:0px 1px #EFEFEF;
        -webkit-box-shadow:0px 1px #EFEFEF;
        background:#E6E6E6;
        background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #E7E7E7;
        -moz-box-shadow:0px 1px #E7E7E7;
        -webkit-box-shadow:0px 1px #E7E7E7;       
        text-shadow:0px 1px #4E802C;
        border-color:#478223;
        background:#599F2F;
        background:-moz-linear-gradient(top,#9FE355 1px,#79BF4A 1px,#599F2F);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#9FE355),color-stop(0.02,#79BF4A),color-stop(1,#599F2F));        
    }
       

C_red.css

    ul.pagination li.details{
       color:#E43838;
    }
    
    ul.pagination li a
    {
        color:#333333;
        text-shadow:0px 1px #F6F6F6;
        padding:6px 9px 6px 9px;
        border:solid 1px #B6B6B6;
        box-shadow:0px 1px #EFEFEF;
        -moz-box-shadow:0px 1px #EFEFEF;
        -webkit-box-shadow:0px 1px #EFEFEF;
        background:#E6E6E6;
        background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #E7E7E7;
        -moz-box-shadow:0px 1px #E7E7E7;
        -webkit-box-shadow:0px 1px #E7E7E7;
        text-shadow:0px 1px #B72E2E;
        border-color:#AD2D2D;
        background:#E43838;
        background:-moz-linear-gradient(top,#FF9B9B 1px,#FE5555 1px,#E43838);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FF9B9B),color-stop(0.02,#FE5555),color-stop(1,#E43838));        
    }
         

 

C_yellow.css

    ul.pagination li.details{
       color:#FFA200;
    }
    
    ul.pagination li a
    {
        color:#333333;
        text-shadow:0px 1px #F6F6F6;
        padding:6px 9px 6px 9px;
        border:solid 1px #B6B6B6;
        box-shadow:0px 1px #EFEFEF;
        -moz-box-shadow:0px 1px #EFEFEF;
        -webkit-box-shadow:0px 1px #EFEFEF;
        background:#E6E6E6;
        background:-moz-linear-gradient(top,#FFFFFF 1px,#F3F3F3 1px,#E6E6E6);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#F3F3F3),color-stop(1,#E6E6E6));
    }
    
    ul.pagination li
    {
        padding-bottom:1px;
    }
    
    ul.pagination li a:hover,
    ul.pagination li a.current
    {    
        color:#FFFFFF;
        box-shadow:0px 1px #E7E7E7;
        -moz-box-shadow:0px 1px #E7E7E7;
        -webkit-box-shadow:0px 1px #E7E7E7;       
    }
      
    ul.pagination li a:hover,
    ul.pagination li a.current
    {
        color:#893A00;
        text-shadow:0px 1px #FFEF42;
        border-color:#FFA200;
        background:#FFC800;
        background:-moz-linear-gradient(top,#FFFFFF 1px,#FFEA01 1px,#FFC800);
        background:-webkit-gradient(linear,0 0,0 100%,color-stop(0.02,#FFFFFF),color-stop(0.02,#FFEA01),color-stop(1,#FFC800));
    }         

 

Дата публикации: 2015-05-31 19:44:59

PHP

0

Отзывы:

Ваше имя:

Ваш e-mail (необязательно):

Сообщение:

Captcha