Java JSP-如何按特定顺序显示元素?

Java JSP-如何按特定顺序显示元素?,java,css,jsp,spring-mvc,twitter-bootstrap-3,Java,Css,Jsp,Spring Mvc,Twitter Bootstrap 3,我需要按顺序列出男孩和女孩的名字。向视图发送名称的数据结构是List 问题是结果如下(例如,男孩的名字以a开头): (有序列表从左到右显示) 我需要将它们显示为(有序列表应该从顶部到按钮显示,然后转到第二列) 不用说,每个团体都有不同数量的名字。例如,组“a”可能比组“b”有更多的名称 <c:forEach var="name" items="${names}"> <div class="col-md-4"> ${name} </div

我需要按顺序列出男孩和女孩的名字。向视图发送名称的数据结构是
List

问题是结果如下(例如,男孩的名字以a开头):

(有序列表从左到右显示)

我需要将它们显示为(有序列表应该从顶部到按钮显示,然后转到第二列)

不用说,每个团体都有不同数量的名字。例如,组“a”可能比组“b”有更多的名称

<c:forEach var="name" items="${names}">
    <div class="col-md-4">
        ${name}
   </div>
</c:forEach>

${name}

第一种方法

  • 您可以使用
    列计数
    css属性:
  • 第二种方法

  • 或者,您可能希望将
    col-md-4
    更改为
    col-md-6
    ,以将它们分成两列: ``` ${name} ```
  • 计算您有多少个名称,然后在达到名称计数的一半时使用if-else,然后切换到第二列
  • 这有点老套,但很管用

  • 首先,您需要确定用于显示数据的列数,我将其理解为
    3

    假设有
    n
    男孩和女孩的数量,逻辑用于第一列,我们将显示
    n/3
    记录,下一行
    n/3
    和下一列剩余记录

    下面是3列显示的JSP代码:

    <div class="col-md-4">
        <c:forEach begin="0" end="${fn:length(names)/3}" var="name" items="${names}" varStatus="loop">
            ${name}<br/>
        </c:forEach>
    </div>
    <div class="col-md-4">
        <c:forEach begin="${(fn:length(names)/3) + 1}" end="${(fn:length(staffs)/3)*2}" var="name" items="${names}" varStatus="loop">
            ${name}<br/>
        </c:forEach>
    </div>
    <div class="col-md-4">
        <c:forEach begin="${((fn:length(names)/3)*2)+1}" var="name" items="${names}" varStatus="loop">
            ${name}<br/>
        </c:forEach>
    </div>
    
    在页面顶部


    应该从服务器端本身对名称进行排序,以获得所需的输出。此外,如果您想在4列或5列中显示,只需更改3除以所需列号即可。它将起作用

    最重要的是如何实现
    ${names}
    。给Java代码一个答案,我试图奖励赏金,但似乎我应该等7个小时。@NavasBasheer非常感谢,伙计!它就像一个符咒。我只需更改
    姓名
    第二行中的
    职员
    <c:forEach var="name" items="${names}">
        <div class="col-md-4">
            ${name}
       </div>
    </c:forEach>
    
    <div class="col-md-4">
        <c:forEach begin="0" end="${fn:length(names)/3}" var="name" items="${names}" varStatus="loop">
            ${name}<br/>
        </c:forEach>
    </div>
    <div class="col-md-4">
        <c:forEach begin="${(fn:length(names)/3) + 1}" end="${(fn:length(staffs)/3)*2}" var="name" items="${names}" varStatus="loop">
            ${name}<br/>
        </c:forEach>
    </div>
    <div class="col-md-4">
        <c:forEach begin="${((fn:length(names)/3)*2)+1}" var="name" items="${names}" varStatus="loop">
            ${name}<br/>
        </c:forEach>
    </div>
    
     <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>