Estoy trabajando en una página de búsqueda que tiene una opción de vista de lista y cuadrícula. Ahora quiero agregar paginación al mismo. No estoy seguro de cómo agregarlo a este código.

También hay un error en esta página, que es: cuando actualizo la página, puedo ver ambas vistas, una seguida de la otra. Solo funciona cuando hago clic en un botón en particular (lista o cuadrícula).

$searchData = Schema::searchVideo($searchValue);
<div class="container">
    <div class="card border-light mb-3 text-center">
<div class="row">
        <?php
        if (empty($searchData)) {
            echo <<<HTML
            <div class="alert alert-danger col-md-12 col-md-offset-4" role="alert" align="center">
                No videos matched the search
            </div>
HTML;
        } else {

  <div id="container">
     <div class="well well-sm"> 
        <div class="btn-group">
            <button id="list-view" class="list"><i class="fa fa-bars"></i></button>
            <button id="grid-view" class="grid"><i class="fa fa-th-large"></i></button>
        </div>   
     </div> 


<div class="grid" id="grid">    
          <div class="card-deck">  

        <?php   
            for ($i = 0; $i < count($searchData); $i++) {
                $year = Schema::getyear($searchData[$i]->getyearId())->getyear();
                $src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';

                echo <<<HTML

             <div class="item col-lg-6 col-md-6 mb-4" > 
                  <div class = "thumbnail">

                     <div class="card h-100">

                        <a href="video.php?video={$searchData[$i]->getVideoId()}"><img class="card-img-top" src={$src} alt=""></a>
                            <div class="card-body">
                                <h4 class="card-title">{$searchData[$i]->getTitle()} </h4>

                            </div>

                      </div>

              </div>

       </div> 

    </div>      
      </div>

<div class="list" id="list">
        <div class="table-responsive" style="width:1000px">
           <table class="table table-striped">  
             <?php   
            for ($i = 0; $i < count($searchData); $i++) {
                $year = Schema::getyear($searchData[$i]->getyearId())->getyear();
                $src = (file_exists('video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]->getUserId() . '/' . $searchData[$i]->getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';

                echo <<<HTML
<tr>
                   <td>    
                   <a href="video.php?video={$searchData[$i]->getVideoId()}">{$searchData[$i]->getTitle()}{$src}</a>        
                  </td>  
                </tr>                            
HTML;
            }
           ?>
           </table>
              <!--</ul>-->
        </div>         
 </div>
   <?php   }
     ?>
        </div>
     </div>                         
</div>   

Schema.php

public function searchVideoCourse(string $courseNumber): ?array {
    $objectArray = [];
   if (isset($_GET['pageno'])) {
        $pageno = $_GET['pageno'];
    } else {
        $pageno = 1;
    }
    $no_of_records_per_page = 10;
    $offset = ($pageno-1) * $no_of_records_per_page;
    $conn = DatabaseConnection::getConnection();
    $total_pages_sql = "SELECT COUNT(*) FROM Video";
    $result1 = $conn->prepare($total_pages_sql);
     $total_rows = $result1->fetch(PDO::FETCH_ASSOC);
     $total_pages = ceil($total_rows / $no_of_records_per_page);
    $stmt = $conn->prepare("SELECT academicYearId, Course.courseId, date, description, fileName, isUploaded, title, userId, Video.videoId FROM Video LEFT JOIN Course ON Video.courseId = Course.courseId WHERE courseNumber = :courseNumber AND isUploaded = 1 ORDER BY Video.title ASC LIMIT $offset, $no_of_records_per_page");
    if ($stmt->execute(array(':courseNumber' => $courseNumber))) {
        while ($result = $stmt->fetch(PDO::FETCH_ASSOC)) {
            array_push($objectArray, VideoFactory::createVideo($result['academicYearId'], $result['courseId'], $result['date'], $result['description'], $result['fileName'], $result['isUploaded'], $result['title'], $result['userId'], $result['videoId']));
        }
        return $objectArray;
    } else {
        return null;
    }
}

<ul class="pagination">

         <li><a href="?pageno=1">First</a></li>
        <li class="<?php if($pageno <= 1){ echo 'disabled'; } ?>">
            <a href="<?php if($pageno <= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?>">Prev</a>
        </li>
        <li class="<?php if($pageno >= $total_pages){ echo 'disabled'; } ?>">
            <a href="<?php if($pageno >= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?>">Next</a>
        </li>
        <li><a href="?pageno=<?php echo $total_pages; ?>">Last</a></li>
    </ul>  

Js

$(document).ready(function(){

        $("#list-view").click(function() {
            $("#grid").hide();
            $("#list").show();
        });
        $("#grid-view").click(function() {
            $("#grid").show();
            $("#list").hide();
        });

    });
0
AAM 16 oct. 2018 a las 19:16

2 respuestas

La mejor respuesta

Poner esto en su bloque document.ready:

 $("#grid").hide();
 $("#list").show();

Como se indicó anteriormente, para hacer la paginación, primero cargaría su conjunto de datos en una matriz y luego llamaría a una función javascript para cargar partes de la matriz (digamos, las primeras 10 filas) en el DOM. Cada botón de su localizador diría, en esencia, "comenzando en el registro n, mostrar las siguientes x filas".

1
Jack Albright 22 oct. 2018 a las 19:09

Debería usar la paginación AJAX aquí, cargar ambas vistas (Lista y Cuadrícula) no es una buena práctica, permítame mostrarle un flujo puntual

  • servir botones de vista (Lista y Cuadrícula) inicialmente y hacer una vista predeterminada
  • poner "Botón Siguiente" a la baja
  • cuando un usuario hace clic en el "Botón Siguiente", busque la vista seleccionada (Lista y cuadrícula) y realice una solicitud AJAX junto con el valor de vista seleccionado
  • de acuerdo con el valor de la vista, puede devolver sus códigos html relevantes.
  • por último, agregue la respuesta en el contenedor final

Aquí hay un buen tutorial sobre paginación ajax

1
Paritosh Pandey 23 oct. 2018 a las 19:00