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

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

java javascript jquery jsp pagination

Java 分页：如何使用AJAX加载第一页,java,javascript,jquery,jsp,pagination,Java,Javascript,Jquery,Jsp,Pagination,我正在使用Struts 2编写在线购物应用程序在前端，我使用jsp、twitter引导、jquery、moustache.js模板和一些javascript 我有产品实体，我想在jsp页面中向用户显示产品列表我这样做的方式是异步加载带有json格式的固定数量（20）产品的页面，然后使用mustache模板获取它们除了用户第一次看到此jsp页面时，我的所有代码都正常工作—前20个产品未显示。因此，当我从一个页面移动到另一个页面时，它会加载信息，但由于twbs插件通过触发事件来工作，这意味着在

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

在前端，我使用jsp、twitter引导、jquery、moustache.js模板和一些javascript

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

我这样做的方式是异步加载带有json格式的固定数量（20）产品的页面，然后使用mustache模板获取它们

除了用户第一次看到此jsp页面时，我的所有代码都正常工作—前20个产品未显示。因此，当我从一个页面移动到另一个页面时，它会加载信息，但由于

twbs插件

通过触发事件来工作，这意味着在第一次加载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>





{{#.}}

名称：/label>{{Name}


价格：{{Price}



{{/.}}

var records=“${requestScope.records}”；
var-recordsPerPage=20；
var pages=Math.ceil（记录/记录页面）；
$（'.sync分页'）.twbsPagination({
总页数：页，
浏览网页：7，
onPageClick:功能（事件，页面）{
$（'#products'）.html（changePage（page））；
}
});
功能更改页（第页）{
pnumber=第1页；
$.ajax({
键入：“GET”，
数据类型：“json”，
url:“产品/上传产品？页面=”+P编号，
成功：功能（产品）{
var template=$（“#产品模板”）.html（）；
var info=Mustache.render（模板、产品）；
$（#products'）.html（info）；
}
})
}

您需要调用

changePage（）。您可能还希望在页面使用$（document.ready（）完成加载所有内容时调用此函数


var records=“${requestScope.records}”；
var-recordsPerPage=20；
var pages=Math.ceil（记录/记录页面）；
$（'.sync分页'）.twbsPagination({
总页数：页，
浏览网页：7，
onPageClick:功能（事件，页面）{
$（'#products'）.html（changePage（page））；
}
});
功能更改页（第页）{
pnumber=第1页；
$.ajax({
键入：“GET”，
数据类型：“json”，
url:“产品/上传产品？页面=”+P编号，
成功：功能（产品）{
var template=$（“#产品模板”）.html（）；
var info=Mustache.render（模板、产品）；
$（#products'）.html（info）；
}
})
}
//把这个加在这里
changePage（）；
@Honerlawd。它可以是卷轴上的作品。滚动后平均自动加载产品。