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

问题描述

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

I have a list of items that will be shown to user. I know to sort the items I can send the list to back-end, sort them and show them again but how to do it in front-end so no need to send the list to back-end.

我已经找到了此表，但它在列中显示了结果.如您所见，我想按以下特定方式显示它们.

Ive found this table but it shows the results in columns. As you see I want to show them in a specific way as following.

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

输出不是一个表，就像下面的

The output is not a table it would be like following

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

推荐答案

您可以对元素进行排序，看看我对数字进行排序的示例:

You can sort the elements, take a look the example I did to sort by number:

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-来对所需的内容进行排序，然后将单击分配给按钮或所需的任何内容.

So you can userdata- to sort for all you want and then assign the click to the button or whatever you want.

希望对您有帮助.

这篇关于如何在JSP中对对象列表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！