根据jsp中的组将数据拆分为多个html表

Question

我有一个大数据表，必须在jsp中拆分成更小的表。将根据组类型创建表。花了好几个小时试图找出它，但无法根据水果类型组过滤jsp中的列表。

     @RequestMapping(value = { "dynamicFruitSettings" }, method = RequestMethod.GET)
        public ModelAndView getDynamicComponents( Model model) {

        LOG.debug("Entering fruit components page");
        ModelAndView mav = new ModelAndView();

        ArrayList<DynamicFruitSettings> resultList = null;
            try {
                resultList = (ArrayList<DynamicFruitSettings>) dynamicFruitService.loadAllFruitComponents();
                mav.addObject(resultList);
            } catch (Exception ex) {

                ex.printStackTrace();
            }
            return new ModelAndView("fruitComponents" , "listFruitComponents", resultList);
        }




        @Entity
        @Table(name = "fruits_components")
        public class DynamicFruitSettings {

        /** The pk1. */
        @Id
        @SequenceGenerator(name = "fruits_components_seq", sequenceName = "fruits_components_seq", allocationSize = 1)
        @GeneratedValue(strategy = GenerationType.SEQUENCE, generator = "fruits_components_seq")


        private Long pk1;

        private String fruit_type;
        private String component_role;
        private Double fruit_wt;

        //getters and setters omitted for brevity

显示jsp中所有数据的示例

＆＃13;

＆＃13;

/* DivTable.com */

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

＆＃13;

<div class="divTable">
  <div class="divTableHeading">&nbsp;Fruits</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;10</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;5</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;13</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;30</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;90</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;25</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;19</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;15</div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我在jsp中的最终外观应该类似于下面的

＆＃13;

＆＃13;

.divTable {
  display: table;
  width: 100%;
}
.divTableRow {
  display: table-row;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
}
.divTableCell,
.divTableHead {
  border: 1px solid #999999;
  display: table-cell;
  padding: 3px 10px;
}
.divTableHeading {
  background-color: #EEE;
  display: table-header-group;
  font-weight: bold;
}
.divTableFoot {
  background-color: #EEE;
  display: table-footer-group;
  font-weight: bold;
}
.divTableBody {
  display: table-row-group;
}

＆＃13;

<div class="divTable">
  <div class="divTableHeading">Banana</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;10</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;5</div>
    </div>
  </div>
</div>
<br>
<div class="divTable">
  <div class="divTableHeading">&nbsp;Peach</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;13</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;30</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;90</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;25</div>
    </div>
  </div>
</div>
<br>
<div class="divTable">
  <div class="divTableHeading">&nbsp;Apple</div>
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;shake</div>
      <div class="divTableCell">&nbsp;19</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;ice cream</div>
      <div class="divTableCell">&nbsp;20</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;cake</div>
      <div class="divTableCell">&nbsp;40</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">&nbsp;candy</div>
      <div class="divTableCell">&nbsp;15</div>
    </div>
  </div>
</div>
<br>

＆＃13;

＆＃13;

＆＃13;

显示所有数据的示例是我目前在jsp中获得的。我从我的Controller获得了这个水果列表，它从db中的fruits表中获取数据。因为水果类型可以是任何东西，我不能做一个简单的＆＃34;每个＆＃34;基于pk1循环水果，然后做一个＆＃34; if＆＃34;将它呈现到jsp中的子句。每行在数据库表中都有一个pk1。

您对如何将它们拆分成较小的表格的建议将非常感激。

Answer 1

我设法通过改变我的控制器来将数据分成动态表，以便我将数据发送到我的jsp。而不是将数据作为列表发送，而是将其作为列表地图发送。通过这种方式，我可以循环地图，将密钥作为一组获取并显示列表中的值。

因此问题得以解决。

我有一个不同的问题，它将作为一个关于复制数据的新问题（即jsp中充当我的表行的列表值）发布，这些问题在每次刷新页面时都会被添加，没有重复数据库中的行，我觉得非常奇怪。只有重新启动我的应用程序时，重复项才会从jsp中删除。