如何对JSP中的对象列表进行排序

Question

我有一个将显示给用户的项目列表。我知道要将可以将列表发送到后端的项目进行排序，对它们进行排序并再次显示它们，但是如何在前端执行此操作，因此无需将列表发送到后端。

我发现this table，但它显示列中的结果。正如你所看到的，我想以下面的方式以特定的方式展示它们。

<div class="row"> 
      <div class="col-md-4"> 
       <c:forEach var="item" items="${products}"> 
        <div style="text-align: left;"> 
         <div> 
         Name: ${item.name} 
         </div> 
         <div> 
         Price: ${item.price} 
         </div> 
        </div> 
       -------------------------- 
       </c:forEach> 
      </div> 
</div> 

输出是不是会像下面

Name: item1 
Price: 12 
--------------- 
Name: item2 
Price: 23 
---------------- 

Answer 1

您可以将元素进行排序，看看我做的数字排序的示例表：

http://jsfiddle.net/tnnqyxcw/1/

js：

$(document).ready(function(){ 
    $('button').on('click', function(){ 
     var s = $(this).data('sort'); console.log(s); 
     if(s === 0){ 
      $(this).data('sort', 1); 
      $('.clist div').sort(function(a,b){ 
       return a.dataset.sid < b.dataset.sid 
      }).appendTo('.clist')    
     }else{ 
      $(this).data('sort', 0); 
      $('.clist div').sort(function(a,b){ 
       return a.dataset.sid > b.dataset.sid 
      }).appendTo('.clist') 
     } 
    }); 
}); 

的Html

<button data-sort="0">Sort:</button><br> 
<div class="clist"> 
    <div data-sid=1>Number 1</div> 
    <div data-sid=4>Number 4</div> 
    <div data-sid=3>Number 3</div> 
    <div data-sid=1>Number 1</div> 
    <div data-sid=4>Number 4</div> 
    <div data-sid=2>Number 2</div> 
    <div data-sid=1>Number 1</div> 
</div> 

所以，你可以将用户data-排序为你想要的，然后分配点击你想要的按钮或什么的。

我希望这是帮助。