我正在使用 Struts 2 编写在线购物应用程序。
在前端，我使用 jsp、twitter bootstrap、jquery、moustache.js 模板，twbs pagination plugin和一些 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>
最佳答案
您需要在初始加载时调用 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>关于java - 分页:如何使用 AJAX 加载第一页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29523307/