Java 如何使用JQuery和Bootstrap布局对象的json数组

我正在使用struts 2、mysql、jquery、jsp、bootstrap、gson和tomcat开发在线购物应用程序

我有一个名为

Product

的Java实体、返回产品json数组的控制器操作和通过ajax调用该操作并向用户显示所有产品的jsp页面

我不明白的是如何显示这样的json数组

我在谷歌上搜索了它提出的过滤和分页，但我不知道它应该如何配置，因为我不想按产品字段分组信息，而是按每个产品实体分组，如下图所示：

如果有更好的插件或其他解决方案，请提出建议，但请注意，在未来的开发中，我想添加

产品的图像

产品
实体：

public class Product{
    private long id;
    private String name;
    private double price;
    private long storeId;
    //getters and setters
}

和动作控制器类ViewAllProducts：

public class ViewAllProducts extends ActionSupport {
    @Override
    public String execute() throws Exception {
        LOG.trace("Start execute");
        Collection<Product> products = productDAO.findAll();
        Gson gson = new Gson();
        JsonElement element = gson.toJsonTree(products,
                new TypeToken<Collection<Product>>() {
                }.getType());
        JsonArray jsonArray = element.getAsJsonArray();
        HttpServletResponse response = ServletActionContext.getResponse();
        response.setContentType("application/json");
        response.setCharacterEncoding("UTF-8");
        response.getWriter().print(jsonArray);
        LOG.trace("Finished execute");
        return null;
    }
}

使用.each循环所有内容并将值写入页面。如果每个items ID用作div ID或类，则可以使用它来针对每个产品。但是如果看不到实际的标记，很难说每个值将如何使用。
在你的成功函数中，你会想要做类似的事情

success: function (data) {
        $(data.products).each(function (index, item) {

            $("#"+item.id+" .name").html(item.name);
            $("#"+item.id+" .price").html(item.price);
            $("#"+item.id+" .store").html(item.store);

        });
    },
    error: function () {}

});.

当然，这只有在页面上已有数据时才有效。如果你需要在页面上构建完整的产品列表，我建议你使用一个JS模板系统，比如带有ICanHaz的MustacheJS。
不要使用数据表。Datatables适用于实际表，但不适用于一般列表。而是使用模板引擎。我喜欢，其他人喜欢胡子或把手。有几种可供选择。这里有一个链接。@gilly3谢谢你提供的链接，我会看的。但是，正如我现在在谷歌上搜索的那样，使用
dust.js
是否是我的最佳解决方案，如果是的话，你能解释一下吗？你能解释一下为什么
icanhaz.js
最适合我的问题吗？
    [{"name":"Amet Ultricies Incorporated","price":679.71,"storeId":1,"id":1},
{"name":"Ut Nisi A PC","price":1133.43,"storeId":1,"id":2},
{"name":"Ligula Limited","price":156.66,"storeId":1,"id":100}]

success: function (data) {
        $(data.products).each(function (index, item) {

            $("#"+item.id+" .name").html(item.name);
            $("#"+item.id+" .price").html(item.price);
            $("#"+item.id+" .store").html(item.store);

        });
    },
    error: function () {}

});.