Как отключить кнопки «Назад» и «Следующая страница»? - PullRequest
0 голосов
/ 09 апреля 2020

Я создал подстраницу, где я включил нумерацию страниц для перемещения между данными таблицы, но у меня возникла проблема: где я показываю, что первые данные есть в productlist? Page = 1 или productlist. php но когда Я на первой странице, я позволяю нажать кнопку «Предыдущий», и это приводит меня к? Page = 0, и это дает мне ошибку, так как эта страница не существует. Кто-нибудь знает, как отключить кнопки «Назад» на первой странице и «Далее» на последней странице? Большое спасибо всем.

Мой код:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/addproductos.css?ver=5">
<link rel="stylesheet" type="text/css" href="css/sidebar.css?ver=6">
<link rel="stylesheet" type="text/css" href="css/header.css?ver=4">
<style>
#main-information {
    width: 100%;
    margin-top: 3%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
} 
.content-header {
    padding: 10px .5rem;
}
.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
}
.pagination > li > a
{
    background-color: grey;
    color: white;
}
</style>
<link rel="icon" href="https://image.flaticon.com/icons/svg/423/423080.svg" >
    <title>LISTA DE PRODUCTOS - PABLOWEBDEV.COM</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<?php
session_start();
require 'lib/checklogin.php';
?>
<div class="wrapper">
    <?php
    require 'lib/header.php';
    require 'lib/sidebar.php';
    ?>
    <div id="main-information">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">Lista de productos</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">Lista de productos</a></li>
              <li class="breadcrumb-item active">Index</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div> <!--- content header --->

<?php
require 'logic/conexion.php';
$limite=10;
 $page = isset($_GET['page']) ? $_GET['page'] : 1;
 $start=($page - 1) * $limite;

$result=$conexion->query("SELECT * FROM productos LIMIT $start, $limite");
$customers=$result->fetch_all(MYSQLI_ASSOC);

$result1=$conexion->query("SELECT count(id) AS id FROM productos");
$custcount=$result1->fetch_all(MYSQLI_ASSOC);
$total=$custcount[0]['id'];
$pages= ceil($total/$limite);

$previous= $page - 1;
$next = $page + 1;
?>

<div class=container>
<table class="table">
  <thead class="thead-dark table-bordered">
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Nombre</th>
      <th scope="col">Precio compra</th>
      <th scope="col">Precio venta</th>
      <th scope="col">Link</th>
      <th scope="col">Sección</th>
      <th scope="col">Ganancia</th>
    </tr>
  </thead>
  <tbody>
    <?php
        foreach($customers as $customer) : ?>
    <tr style="color: black;">
            <td style="background-color:#DEE0E3;"><?= $customer['id']?></td>
            <td style="background-color:#DEE0E3;"><?= $customer['nombre']?></td>
            <td style="background-color:#DEE0E3;"><?= $customer['precioinicial']?>€</td>
            <td style="background-color:#DEE0E3;"><?= $customer['precioventa']?>€</td>
            <td style="background-color:#DEE0E3;"><?= $customer['link']?></td>
            <td style="background-color:#DEE0E3;"><?= $customer['seccion']?></td>
            <td style="background-color:#DEE0E3;"><?= $customer['ganancia']?>€</td>          
    </tr>
    <?php endforeach ?>
  </tbody>
</table>
</div> <!---- TERMINA CONTAINER ---->
<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item" >
      <a class="page-link" href="listaproductos.php?page=<?= $previous;?>">Anterior</a>
    </li>
    <?php for($i = 1; $i<=$pages; $i++) : ?>
    <li class="page-item"><a class="page-link" href="listaproductos.php?page=<?= $i; ?>"><?= $i; ?></a></li>
    <?php endfor;?>
    <li class="page-item">
      <a class="page-link" href="listaproductos.php?page=<?= $next;?>">Siguiente</a>
    </li>
  </ul>
</nav> 


    </div>  <!-- TERMINA MAIN INFORMATION --->
</div> <!-- TERMINA WRAPPER --->

 <!--- TERMINAR IF PAGE=0 DISABLE BUTTONS ---->
</body>
</html>
</html>

1 Ответ

0 голосов
/ 09 апреля 2020

Убедитесь, что текущая страница меньше или равна 1. Если затем добавьте класс disabled к тегу привязки. А с помощью CSS вы можете отключить тег привязки.

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
    <li class="page-item" >
        <!-- here is the previous button disabling code -->
        <a class="page-link <?= echo $page <= 1 ? 'disabled': ''; ?>" href="listaproductos.php?page=<?= $previous;?>">Anterior</a>
    </li>
    <?php for($i = 1; $i<=$pages; $i++) : ?>
    <li class="page-item"><a class="page-link" href="listaproductos.php?page=<?= $i; ?>"><?= $i; ?></a></li>
    <?php endfor;?>
    <li class="page-item">
        <!-- here is the next button disabling code -->
        <a class="page-link <?= echo $page >= $pages ? 'disabled': ''; ?>" href="listaproductos.php?page=<?= $next;?>">Siguiente</a>
    </li>
  </ul>
</nav>

И CSS равно

a.disabled {
  pointer-events: none;
  cursor: default;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...