分页：如何使用 AJAX 加载首页答案

【问题标题】：Pagination: how to load first page with AJAX分页：如何使用 AJAX 加载首页
【发布时间】：2015-04-08 19:09:34
【问题描述】：

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

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

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

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

我的所有代码都有效，除了用户第一次看到这个 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>

【问题讨论】：

标签： java javascript jquery jsp pagination

【解决方案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>

【讨论】：

@Honerlawd。它可以在滚动上工作吗？表示滚动后自动加载产品。