如何對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-排序爲你想要的，然後分配點擊你想要的按鈕或什麼的。

我希望這是幫助。