2016-01-10 2 views
0

Я пытаюсь создать меню, которое можно использовать для сортировки или фильтрации сообщений из моей базы данных, подобно тому, как imgur.com сортирует свои сообщения. Я собираюсь сортировать сообщения либо новейшими, либо самыми популярными, либо фильтрами по категориям. Порядок сортировки, которым я могу управлять, но я не уверен, как динамически изменять его, с помощью которого выбирается опция. Вот пример кода.Как сортировать сообщения с выпадающим меню PHP

<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> 

ответ

2

Чтобы динамически изменять содержимое страницы, вам понадобится использовать Javascript и AJAX. В вашем поле выбора вам нужно, чтобы обработчик события наблюдал за изменением значения элемента. При изменении вы проанализируете это значение и сделаете вызов AJAX на ваш сервер, чтобы вытащить данные, которые вы хотите отобразить. По завершении используйте эти данные для заполнения содержимого на странице.

Другой альтернативой является то, что вы можете загрузить все нужные данные, хотя и неэффективно, и просто скрыть различный контент до тех пор, пока пользователь не выберет соответствующую опцию в поле выбора. Проблема в том, что если у вас много контента, распространяемого среди этих страниц, тогда будет проблема с производительностью.

EDIT (с примерами кода):

<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> 
+0

Хорошо, звучит многообещающе. Может ли обработчик события быть формой с действием, являющимся вызовом? Я не очень разбираюсь в javascript и AJAX, хотя, как вы думаете, вы могли бы дать быстрый пример того, как это может выглядеть? Спасибо за вашу помощь – Codedstuff

+1

Я отредактировал мое сообщение. Удачи! :) –

+0

Отлично, спасибо, что это очень полезно. Ценить это! – Codedstuff

Смежные вопросы