如何使用下拉菜单PHP对帖子进行排序

时间:2016-01-10 16:25:04

标签: php jquery sorting

我正在尝试创建一个菜单,可用于对我的数据库中的帖子进行排序或过滤,就像imgur.com对其帖子进行排序一样。我想要的是按照最新的或最受欢迎的方式对帖子进行排序,并按类别进行过滤。我可以管理的排序顺序,但我不确定如何通过选择哪个选项来动态更改它。这是一些示例代码。

<html>
<div id="sort-menu">
<span>Sort by</span>
<select>
    <option>Newest first</option>
    <option>Most popular</option>
</select>
<span>in</span>
<select>
    <option>All</option>
    <option>Category1</option>
    <option>Category2</option>
    <option>Category3</option>
</select>
</div>
</html>

1 个答案:

答案 0 :(得分:2)

为了动态更改页面内容,您需要使用Javascript和AJAX。使用选择框,您需要让事件处理程序监视元素值的变化。在更改时,您解析该值并对服务器进行AJAX调用以提取要显示的数据。完成后,使用该数据填充页面上的内容。

另一个替代方案是,您可以加载所需的所有数据,虽然效率低,但只需隐藏不同的内容,直到用户在选项框中选择相应的选项。这个问题是如果你在这些页面中分布了大量内容,那么就会出现性能问题。

编辑(带示例代码)

<div id='content-one'>
    ...
</div>

<div id='content-two'>
    ...
</div>

<select id='choice'>
    <option value='one'>Content One</option>
    <option value='two'>Content Two</option>
</select>

<script>
    $(function() {
        // When our select changes, we execute a callback
        $('#choice').change(function() {
            var val = $('#choice').val();

            // This implementation can be changed. This is just how I would do it
            $.ajax({
                type: 'GET',
                url: 'path/to/content/' + val; // ie 'path/to/content/one' or 'path/to/content/two'
            }).done(function(data){
                if (val == 'one')
                    // Populate content for one
                else
                    // Populate content for two
            });

            // Hide everything, then show the content that was selected
            $("#content-one, #content-two").hide();
            $("#content-" + val).show();
        });
    });

</script>