title: How to add pagination to list/grid view in php, bootstrap, css?
body: <p>I am working on a search page which has an option of list and grid view. Now I want to add pagination to the same. Not sure how to add it to this code. </p>
  
  <p>Also there's a bug in this page, which is - when I refresh the page I can see both the views, one followed by the other.
  It only works when I click on a particular button (list or grid). </p>
  
  <pre><code>$searchData = Schema::searchVideo($searchValue);
  &lt;div class="container"&gt;
      &lt;div class="card border-light mb-3 text-center"&gt;
  &lt;div class="row"&gt;
          &lt;?php
          if (empty($searchData)) {
              echo &lt;&lt;&lt;HTML
              &lt;div class="alert alert-danger col-md-12 col-md-offset-4" role="alert" align="center"&gt;
                  No videos matched the search
              &lt;/div&gt;
  HTML;
          } else {
  
    &lt;div id="container"&gt;
       &lt;div class="well well-sm"&gt; 
          &lt;div class="btn-group"&gt;
              &lt;button id="list-view" class="list"&gt;&lt;i class="fa fa-bars"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;button id="grid-view" class="grid"&gt;&lt;i class="fa fa-th-large"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/div&gt;   
       &lt;/div&gt; 
  
  
  &lt;div class="grid" id="grid"&gt;    
            &lt;div class="card-deck"&gt;  
  
          &lt;?php   
              for ($i = 0; $i &lt; count($searchData); $i++) {
                  $year = Schema::getyear($searchData[$i]-&gt;getyearId())-&gt;getyear();
                  $src = (file_exists('video/' . $year . '/' . $searchData[$i]-&gt;getUserId() . '/' . $searchData[$i]-&gt;getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]-&gt;getUserId() . '/' . $searchData[$i]-&gt;getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';
  
                  echo &lt;&lt;&lt;HTML
  
               &lt;div class="item col-lg-6 col-md-6 mb-4" &gt; 
                    &lt;div class = "thumbnail"&gt;
  
                       &lt;div class="card h-100"&gt;
  
                          &lt;a href="video.php?video={$searchData[$i]-&gt;getVideoId()}"&gt;&lt;img class="card-img-top" src={$src} alt=""&gt;&lt;/a&gt;
                              &lt;div class="card-body"&gt;
                                  &lt;h4 class="card-title"&gt;{$searchData[$i]-&gt;getTitle()} &lt;/h4&gt;
  
                              &lt;/div&gt;
  
                        &lt;/div&gt;
  
                &lt;/div&gt;
  
         &lt;/div&gt; 
  
      &lt;/div&gt;      
        &lt;/div&gt;
  
  &lt;div class="list" id="list"&gt;
          &lt;div class="table-responsive" style="width:1000px"&gt;
             &lt;table class="table table-striped"&gt;  
               &lt;?php   
              for ($i = 0; $i &lt; count($searchData); $i++) {
                  $year = Schema::getyear($searchData[$i]-&gt;getyearId())-&gt;getyear();
                  $src = (file_exists('video/' . $year . '/' . $searchData[$i]-&gt;getUserId() . '/' . $searchData[$i]-&gt;getFileName() . '_small.jpg')) ? 'video/' . $year . '/' . $searchData[$i]-&gt;getUserId() . '/' . $searchData[$i]-&gt;getFileName() . '_small.jpg' : 'images/MediaPortal-700-400a.jpg';
  
                  echo &lt;&lt;&lt;HTML
  &lt;tr&gt;
                     &lt;td&gt;    
                     &lt;a href="video.php?video={$searchData[$i]-&gt;getVideoId()}"&gt;{$searchData[$i]-&gt;getTitle()}{$src}&lt;/a&gt;        
                    &lt;/td&gt;  
                  &lt;/tr&gt;                            
  HTML;
              }
             ?&gt;
             &lt;/table&gt;
                &lt;!--&lt;/ul&gt;--&gt;
          &lt;/div&gt;         
   &lt;/div&gt;
     &lt;?php   }
       ?&gt;
          &lt;/div&gt;
       &lt;/div&gt;                         
  &lt;/div&gt;   
  </code></pre>
  
  <p>schema.php</p>
  
  <pre><code>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-&gt;prepare($total_pages_sql);
       $total_rows = $result1-&gt;fetch(PDO::FETCH_ASSOC);
       $total_pages = ceil($total_rows / $no_of_records_per_page);
      $stmt = $conn-&gt;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-&gt;execute(array(':courseNumber' =&gt; $courseNumber))) {
          while ($result = $stmt-&gt;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;
      }
  }
  
  &lt;ul class="pagination"&gt;
  
           &lt;li&gt;&lt;a href="?pageno=1"&gt;First&lt;/a&gt;&lt;/li&gt;
          &lt;li class="&lt;?php if($pageno &lt;= 1){ echo 'disabled'; } ?&gt;"&gt;
              &lt;a href="&lt;?php if($pageno &lt;= 1){ echo '#'; } else { echo "?pageno=".($pageno - 1); } ?&gt;"&gt;Prev&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="&lt;?php if($pageno &gt;= $total_pages){ echo 'disabled'; } ?&gt;"&gt;
              &lt;a href="&lt;?php if($pageno &gt;= $total_pages){ echo '#'; } else { echo "?pageno=".($pageno + 1); } ?&gt;"&gt;Next&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="?pageno=&lt;?php echo $total_pages; ?&gt;"&gt;Last&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;  
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$(document).ready(function(){
  
          $("#list-view").click(function() {
              $("#grid").hide();
              $("#list").show();
          });
          $("#grid-view").click(function() {
              $("#grid").show();
              $("#list").hide();
          });
  
      });
  </code></pre>