如何使用Bootstrap的下拉菜单对要显示的项目进行排序

Question

I have an app that displays recipes on the index page (mywebsite.com/recipes). I want to sort them either by date or by popularity, and have a button directly on the page so the user can choose how he wants to sort the recipes. I am using bootstrap's dropdown menu, which uses anchor tags (would a select menu be better suited?).

Here's the dropdown menu:

<div class="dropdown indexDropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
      Sort by
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <li><a href="#(WHAT SHOULD I PUT HERE)">Most recent</a></li>
      <li><a href="#(WHAT SHOULD I PUT HERE)">Most popular</a></li>
    </ul>
  </div>

Here's the route I want to use when "Date" is chosen or when nothing is clicked by the user (default sort):

//INDEX ROUTE (SORT BY DATE)
router.get("/WHAT SHOULD I PUT HERE", function(req, res){
    if(req.query.search && req.xhr) {
       const regex = new RegExp(escapeRegex(req.query.search), 'gi');
       // Get all recipes from DB
       Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
          if(err){
             console.log(err);
          } else {
             res.status(200).json(foundRecipes);
          }
       });
   } else {
       // Get all recipes from DB if no search input
       Recipe.find({}).sort({"createdAt": -1}).limit(9).exec(function(err, foundRecipes){
          if(err){
              console.log(err);
          } else {
             if(req.xhr) {
               res.json(foundRecipes);
             } else {
               res.render("recipes/index",{recipes: foundRecipes});
             }
          }
       });
   }
});

Here's the route I want to use when "Popularity" is chosen or when nothing is clicked by the user (default sort):

//INDEX ROUTE (SORT BY POPULARITY)

    router.get("/WHAT SHOULD I PUT HERE", function(req, res){
        if(req.query.search && req.xhr) {
           const regex = new RegExp(escapeRegex(req.query.search), 'gi');
           // Get all recipes from DB
           Recipe.find({title: regex}).limit(9).sort({"createdAt": -1}).exec(function(err, foundRecipes){
              if(err){
                 console.log(err);
              } else {
                 res.status(200).json(foundRecipes);
              }
           });
       } else {
           // Get all recipes from DB if no search input
           Recipe.find({}).sort({"numberOfPins": -1}).limit(9).exec(function(err, foundRecipes){
              if(err){
                  console.log(err);
              } else {
                 if(req.xhr) {
                   res.json(foundRecipes);
                 } else {
                   res.render("recipes/index",{recipes: foundRecipes});
                 }
              }
           });
       }
    });

How should I do this? What href should I assign to each anchor tag in the dropdown menu? Should I just add something like href="/recipes?_sort=POPULARITY"?

Thanks a lot!

Answer 1

<a href='/route1'></a> creates a get request for route1. So I created two separate routes (route1 and route2) for sorting mongo data.

<a href='/route1'>Sort by Popularity</a>
 <a href='/route2'>Sort by Date</a>

router.get("/route1",function(){
   Sort data by popularity
})

router.get("/route2",function(){
   Sort data by Date
})

Works for me. May not be an optimum method but it just works