How to display and order two tables (Movies/Series) based on views in PHP?-CodePudding

I have a section named "Trending" I want to display both series and movies (two different tables that are not joined) but I want to order them based on who got more views. I've done 2 foreach loops but it shows movies first then series; the problem is when a serie for example has 1000 views and a movie has 800 it shows the movie first because the first iteration is for trending movies .Is there any logic to tackle this problem?

<div  id="trending">
  
  <div >
  <?php foreach($trendingMovies as $trendingMovie) : ?>
    <!-- Movie Start -->
    <a href="<?= base_url('movies/movie/') . $trendingMovie->movie_id ?>" >
      <div >
        <img src="<?= $trendingMovie->movie_poster_large ?>" alt="<?= $trendingMovie->movie_name ?>">
      </div>
    </a>
    <!-- Movie End -->
    <?php endforeach; ?>


    <?php foreach($trendingSeries as $trendingSerie) : ?>
    <!-- Serie Start -->
    <a href="<?= base_url('series/serie/') . $trendingSerie->serie_id ?>" >
      <div >
        <img src="<?= $trendingSerie->serie_poster_large ?>" alt="<?= $trendingSerie->serie_name ?>">
      </div>
    </a>
    <!-- Serie End -->
    <?php endforeach; ?>
  </div>
 
</div>

CodePudding user response：

Use JQuery (;

<div  id="trending">
  
  <div >
  <?php foreach($trendingMovies as $trendingMovie) : ?>
    <div  data-position="<?= $trendingMovie->views?>">
        <!-- Movie Start -->
        <a href="<?= base_url('movies/movie/') . $trendingMovie->movie_id ?>" >
          <div >
            <img src="<?= $trendingMovie->movie_poster_large ?>" alt="<?= $trendingMovie->movie_name ?>">
          </div>
        </a>
    </div>
    <!-- Movie End -->
    <?php endforeach; ?>


    <?php foreach($trendingSeries as $trendingSerie) : ?>
        <div  data-position="<?= $trendingSerie->views?>">    
            <!-- Serie Start -->
            <a href="<?= base_url('series/serie/') . $trendingSerie->serie_id ?>" >
              <div >
                <img src="<?= $trendingSerie->serie_poster_large ?>" alt="<?= $trendingSerie->serie_name ?>">
              </div>
            </a>
        </div>
    <!-- Serie End -->
    <?php endforeach; ?>
  </div>
 
</div>
<script>
    $("#trending div.foot").sort(function(a, b) {
      return $(a).data("position") - $(b).data("position");
    }).appendTo("#trending");
</script>

Another sample for vanilla javascript

 <ul id="list">
         <li  data-index="1">1 </li>
         <li  data-index="5">5</li>
         <li  data-index="2">2</li>
         <li  data-index="3">3</li>
         <li  data-index="4">4 </li>
     </ul>
       
   
     <script>
         function comparator(a, b) {
             if (a.dataset.index < b.dataset.index)
                 return -1;
             if (a.dataset.index > b.dataset.index)
                 return 1;
             return 0;
         }
           
         // Function to sort Data
        
         var indexes = document.querySelectorAll("[data-index]");
         var indexesArray = Array.from(indexes);
         let sorted = indexesArray.sort(comparator);
         sorted.forEach(e =>
             document.querySelector("#list").appendChild(e));
         
     </script>