Question

我正在使用一个具有列表和网格视图选项的搜索页面。现在，我想在其中添加分页。不确定如何将其添加到此代码中。

此页面中还有一个错误，即-刷新页面时，我可以看到两个视图，一个视图然后一个视图。仅当我单击特定按钮（列表或网格）时，它才起作用。

$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();
        });

    });

Answer 1

将其放入您的document.ready块中：

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

如上所述，要进行分页，我首先将数据集加载到数组中，然后调用javascript函数将数组的部分（例如前10行）加载到DOM中。寻呼机中的每个按钮实质上都会说：“从记录n开始，显示接下来的x行”。

Answer 2

您应该在此处使用AJAX分页，这不是加载两个视图（列表和网格）的好习惯，让我向您展示点向流

最初提供视图按钮（“列表和网格”），并设置一个默认视图
将“下一个按钮”置于不利位置
当用户单击“下一步按钮”时，找到他/她选择的视图（列表和网格），并与选择的视图值一起发出AJAX请求
根据视图值，您可以返回其相关的html代码。
最后将响应追加到最终容器中

这是有关ajax pagination

的很好的教程

将分页添加到php，bootstrap，css中的列表/网格视图

2 个答案: