Question

我正在使用Struts 2编写在线购物应用程序。

在前端我使用的是jsp，twitter bootstrap，jquery，moustache.js模板，twbs pagination plugin和一些javascript。

我有Product实体，我想在jsp页面中向用户显示产品列表。

我这样做的方式是异步加载页面，其中包含json格式的产品修订号（20），然后使用胡子模板获取它们。

除了用户第一次看到这个jsp页面的时候，我的所有代码都有效 - 前20个产品没有显示。因此，当我从一个页面移动到另一个页面时，它会加载信息，但是当twbs plugin通过触发事件工作时，这意味着在第一次加载jsp页面后不会触发事件。

所以我的问题是解决这个问题的真正好办法是什么？

我应该触发一次事件还是使用$(document).ready()或$(document).onload()？

我不是javascript的专家，所以请耐心等待

<html>
<%@ include file="/WEB-INF/jspf/head.jspf"%>
<body>
    <%@ include file="/WEB-INF/jspf/menu.jspf"%>
    <div class="container">
        <ul class="sync-pagination pagination"></ul>
        <div id="products" style="width: 50%"></div>
        <ul class="sync-pagination pagination"></ul>
    </div>

    <script type="text/javascript"
        src="webjars/mustachejs/0.8.2/mustache.js"></script>
    <script id="products-template" type="text/mustache-template">
<ul class="list-group">
{{#.}}
  <li class="list-group-item">
        <label for="{{name}}">Name: /label> {{name}}
</br>
        <label for="{{price}}">Price: </label> {{price}}
</br>
<a href="product/view?id={{id}}">Full description...</a>
  </li>
{{/.}}
</ul>
    </script>

    <script type="text/javascript"
        src="script/jquery.twbsPagination.min.js"></script>
    <script type="text/javascript">
        var records = "${requestScope.records}";
        var recordsPerPage = 20;
        var pages = Math.ceil(records / recordsPerPage);
        $('.sync-pagination').twbsPagination({
            totalPages : pages,
            visiblePages : 7,
            onPageClick : function(event, page) {
                $('#products').html(changePage(page));
            }
        });

        function changePage(page) {
            pnumber = page || 1;

            $.ajax({
                type : 'GET',
                dataType : 'json',
                url : 'product/upload_products?page=' + pnumber,
                success : function(products) {
                    var template = $('#products-template').html();
                    var info = Mustache.render(template, products);
                    $('#products').html(info);
                }
            })
        }
    </script>
</body>
</html>

Answer 1

您需要在初始加载时调用changePage();。您可能还希望在页面使用$(document).ready();

完成加载所有内容时调用此方法

<script type="text/javascript">
        var records = "${requestScope.records}";
        var recordsPerPage = 20;
        var pages = Math.ceil(records / recordsPerPage);
        $('.sync-pagination').twbsPagination({
            totalPages : pages,
            visiblePages : 7,
            onPageClick : function(event, page) {
                $('#products').html(changePage(page));
            }
        });

        function changePage(page) {
            pnumber = page || 1;

            $.ajax({
                type : 'GET',
                dataType : 'json',
                url : 'product/upload_products?page=' + pnumber,
                success : function(products) {
                    var template = $('#products-template').html();
                    var info = Mustache.render(template, products);
                    $('#products').html(info);
                }
            })
        }
  
        //Add this in here
        changePage();
    </script>

分页：如何使用AJAX加载第一页

1 个答案: