分页：如何使用AJAX加载第一页
我正在使用Struts 2编写网上购物应用程序。
在前端，我使用了jsp、twitter引导、jquery和Moustach。js模板、twbs分页插件和一些javascript。
我有产品实体，我想在jsp页面中向用户显示产品列表。
我这样做的方式是异步加载页面与固定数量（20）的产品在json格式，然后获得他们使用胡子模板。
除了用户第一次看到此jsp页面时，我的所有代码都正常工作—前20个产品未显示。因此，当我从一个页面移动到另一个页面时，它会加载信息，但由于twbs插件通过触发事件来工作，这意味着在第一次加载jsp页面后不会触发事件。
所以我的问题是，解决这个问题的真正好方法是什么？
我应该触发一个事件一次或使用$（文档）。就绪（）或$（文档）。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>
共有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>
-
好的，首先，我将告诉这应该如何工作：我有一个页面的图片链接下侧，点击一个图片，该链接的信息出现在另一个div。我使用jQuery/Ajax将链接id发布到一个php文件中，并将该数据返回到所选的div。链接应该分页，以便一次显示4个。 这是正在发生的事情：post部分是ok的，当我单击一个链接时，正确的数据将显示在所选的div中。我不知道如何使链接div分页虽然。我需要他们分页时，页面加载，现在当
-
问题内容： 我有一个PHP include，它需要一段时间才能加载，因为PHP必须获取很多数据。我不想放慢整个网页的加载，以等待包含此内容，那么如何使用ajax加载该包含内容呢？我不希望通过单击按钮来触发Ajax，而只是希望它在页面加载时加载包含，因此，如果您查看下面的示例，则会在显示内含代码的同时显示“更多HTML内容”。 php仍在加载中。 问题答案： 如果您使用的是jQuery，则可以使用他
-
问题内容： 我在这个小组中搜索并在Google周围搜索，但仍然没有运气，我也看到有些问题，但是线程并没有帮助，所以我在这里 这个问题很简单，为了帮助您，我在.zip文件中打包了可以测试的文件 http://www.ivanhalen.com/fancyproblem.zip 我有一些链接的主页（index.php） 单击它们将加载通过AJAX的摘要（page.php） 在代码段中，有一个或多个链接
-
问题内容： 我尝试在我的网站中实施AJAX。单击div changepass的内容时，则应加载changepass.template.php。这是我为此使用的代码。 我的问题是在页面changepass.template.php完全加载时如何显示GIF动画（loading.gif）。请给我一些代码提示。 问题答案： 有很多方法可以做到这一点。一种简单的方法： JS： 詹姆斯·怀斯曼 （ James
-
问题内容： 我在项目中使用gem 来显示页面中的记录。 我希望加载下一页而不使用重新加载整个页面。 我在网上找到了一些示例，但它们对我不起作用。 这该怎么做？ 问题答案： 使用以下内容创建一个新的助手（例如app / helpers / will_paginate_helper.rb）： 然后在您的视图中使用此标记进行ajax分页： 请记住，分页链接将包含URL的现有参数，您可以如下所示排除这些参
-
问题内容： 我已经花了数小时阅读和尝试教程。我似乎找不到能解决问题的解决方案，我知道它应该很简单，但是我在AJAX方面苦苦挣扎。:( 我想从div中的链接加载发布内容。以下是我所拥有的。有人可以在JavaScript方面帮我吗？谢谢！ 我想在div #loadAjaxHere中加载此代码 感谢您的帮助！！ 问题答案： 好的，我认为经过长时间的反复试验，我已经解决了这一问题。 这似乎可行，但是如果这