如何在PHP中按浏览量排序并展示Movies/Series两个独立数据表？

方案一：后端合并数据后统一排序（推荐） #

核心思路是把电影和剧集的数据转换成统一结构的数组，合并后按浏览量降序排序，再一次性循环渲染，彻底解决先电影后剧集的顺序问题。

具体实现代码： #

<div class="trending" id="trending">
  <div class="trending-wrapper">
    <?php
    // 初始化合并数组
    $combinedTrending = [];

    // 处理电影数据，统一字段结构
    foreach ($trendingMovies as $movie) {
        $combinedTrending[] = [
            'type' => 'movie',
            'id' => $movie->movie_id,
            'poster' => $movie->movie_poster_large,
            'name' => $movie->movie_name,
            'views' => $movie->movie_views // 替换为你实际的电影浏览量字段名
        ];
    }

    // 处理剧集数据，统一字段结构
    foreach ($trendingSeries as $serie) {
        $combinedTrending[] = [
            'type' => 'serie',
            'id' => $serie->serie_id,
            'poster' => $serie->serie_poster_large,
            'name' => $serie->serie_name,
            'views' => $serie->serie_views // 替换为你实际的剧集浏览量字段名
        ];
    }

    // 按浏览量降序排序
    usort($combinedTrending, function($a, $b) {
        return $b['views'] - $a['views'];
    });

    // 循环渲染所有内容
    foreach ($combinedTrending as $item) {
        // 根据类型生成对应跳转链接
        $itemUrl = $item['type'] === 'movie' 
            ? base_url('movies/movie/') . $item['id'] 
            : base_url('series/serie/') . $item['id'];
    ?>
        <a href="<?= $itemUrl ?>" class="trending_item">
            <div class="trending_item_poster">
                <img src="<?= $item['poster'] ?>" alt="<?= $item['name'] ?>">
            </div>
        </a>
    <?php } ?>
  </div>
</div>

方案二：数据库层面联合查询（效率最高） #

如果两个表的筛选逻辑一致，可以直接用SQL的UNION ALL合并查询结果，再按浏览量排序，后端直接拿到排序好的数据渲染，减少PHP数组处理的开销。

SQL示例（需匹配你的实际表字段）： #

SELECT 
    'movie' AS item_type,
    movie_id AS item_id,
    movie_poster_large AS poster,
    movie_name AS title,
    movie_views AS views
FROM movies
WHERE /* 你的Trending筛选条件，比如：created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY) */
UNION ALL
SELECT 
    'serie' AS item_type,
    serie_id AS item_id,
    serie_poster_large AS poster,
    serie_name AS title,
    serie_views AS views
FROM series
WHERE /* 和电影一致的筛选条件 */
ORDER BY views DESC;

拿到查询结果后，直接循环渲染即可，逻辑和方案一的渲染部分完全一致。

方案三：前端合并排序（备选，不推荐） #

如果后端逻辑暂时无法修改，可以把两个数据集转成JSON传到前端，用JavaScript合并排序后动态生成DOM。但这种方式不利于SEO，大数据量时性能较差，仅作临时备选。

简单实现示例： #

<div class="trending" id="trending">
  <div class="trending-wrapper"></div>
</div>

<script>
// 后端传递数据到前端
const movies = <?= json_encode($trendingMovies) ?>;
const series = <?= json_encode($trendingSeries) ?>;

// 统一结构并合并
const combined = [
    ...movies.map(m => ({
        type: 'movie',
        id: m.movie_id,
        poster: m.movie_poster_large,
        name: m.movie_name,
        views: m.movie_views
    })),
    ...series.map(s => ({
        type: 'serie',
        id: s.serie_id,
        poster: s.serie_poster_large,
        name: s.serie_name,
        views: s.serie_views
    }))
];

// 按浏览量降序排序
combined.sort((a, b) => b.views - a.views);

// 渲染到页面
const wrapper = document.querySelector('.trending-wrapper');
combined.forEach(item => {
    const url = item.type === 'movie' ? `/movies/movie/${item.id}` : `/series/serie/${item.id}`;
    const itemDom = document.createElement('a');
    itemDom.className = 'trending_item';
    itemDom.href = url;
    itemDom.innerHTML = `<div class="trending_item_poster"><img src="${item.poster}" alt="${item.name}"></div>`;
    wrapper.appendChild(itemDom);
});
</script>

注意事项： #

• 原代码存在class笔误：trending_tem需改为trending_item，否则样式会不统一
• 确保两个表的浏览量字段命名明确，避免混淆

内容的提问来源于stack exchange，提问作者Tony Vito