创建 ajax 分页
Creating ajax pagination
我正在尝试使用以下代码进行ajax分页:
// AJAX pagination
$(".pages .prev").live('click', function(event) {
event.preventDefault()
var current_page = parseInt(getParameterByName('page'))-1;
$.get('/ajax/financial_page/', {'page': current_page}, function(response) {
$(".content table").replaceWith(response)
});
})
在我看来,功能:
def financial_page(request):
"""
Returns a single financials page, without extra HTML (used in AJAX calls).
"""
page = int(request.GET.get('page', 1))
if request.user.is_superuser:
fs = FinancialStatements.objects.order_by('-date', 'statement_id')
else:
up = request.user.get_profile()
providers = up.provider.all()
fs = FinancialStatements.objects.filter(provider__in=providers).order_by('-date', 'statement_id')
fs_objects, current_page_object, page_range = paginator(request, objects=fs, page=page, number_per_page=30)
data = { 'fs':fs_objects,
'page_range': page_range,
'current_page': current_page_object,
}
page = render_to_string('financial_section.html', data, RequestContext(request))
return HttpResponse(simplejson.dumps([page]))
但是,我遇到了两个问题。首先是response
不是真正的 HTML,并且有一堆n't't'n't't'n't'n't'n't'n't't'n't'
等。另外,我在跟踪当前页面/根据需要更改网址时遇到问题。我将如何在这里构建一个功能性的 ajax 分页?
更新:我想出了第一个,通过做response = $.parseJSON(response);
.不过,我将如何跟踪我在哪个页面上?
要跟踪页面,您可以使用 AJAX 函数在单击时递增/递减变量。试试这个:
var counter="0";
$(document.body).on('click', ".pages .prev, .pages .next", function(event) {
if($(this).hasClass('prev')
counter--;// <--decrement for clicking previous button
else if($(this).hasClass('next')
counter++; // <--increment for clicking next button
event.preventDefault()
$.get('/ajax/financial_page/', {'page': counter}, function(response) {
$(".content table").replaceWith(response)
});
})
我也不会使用live
方法,因为它在 jQuery 1.7 中已被弃用。它已被on
方法取代。在此处查看 jQuery on()
API:http://api.jquery.com/on/
查看本教程关于"使用 jQuery、PHP 和 MySQL 的 Ajax 滚动分页",它可能会简化您的工作:http://www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and-mysql
以下是以下要点:
var is_loading = false; // initialize is_loading by false to accept new loading
var limit = 4; // limit items per page
$(function() {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (is_loading == false) { // stop loading many times for the same page
// set is_loading to true to refuse new loading
is_loading = true;
// display the waiting loader
$('#loader').show();
// execute an ajax query to load more statments
$.ajax({
url: 'load_more.php',
type: 'POST',
data: {last_id:last_id, limit:limit},
success:function(data){
// now we have the response, so hide the loader
$('#loader').hide();
// append: add the new statments to the existing data
$('#items').append(data);
// set is_loading to false to accept new loading
is_loading = false;
}
});
}
}
});
});
尝试使用 javascript String.replace() 方法:
// AJAX pagination
$(".pages .prev").live('click', function(event) {
event.preventDefault()
var current_page = parseInt(getParameterByName('page'))-1;
$.post('/ajax/financial_page/', {'page': current_page}, function(response) {
response = response.replace(/'n/g,'<br>').replace(/'t/,' ');
$(".content table").replaceWith(response)
});
})
jQuery.get(url, [data], [callback], [type])
type :xml, html, script, json, text, _default。
尝试将最后一个参数定义为"HTML"怎么样?
相关文章:
- 使用ajax的服务器端分页&jQuery
- 分页:如何用AJAX加载第一个页面
- 导轨 4.宝石will_paginate.更改在 ajax 请求上设置的分页链接
- CodeIgniter - AJAX 生成的元素内的 AJAX 分页
- 分页-标准php或不使用ajax重新加载页面
- 在ajax分页视图(cakephp)中显示adsense的问题
- 在部分视图内渲染的WebGrid将引发“;“jQuery未定义”,当尝试执行基于ajax的分页或过滤时
- 在第三次onPageClick事件后,使用twbspagination插件和AJAX更新JS分页
- ajax请求上的kendo分页问题
- 如何使用CodeIgniter在Ajax中对数组进行切片以进行分页
- AJAX 分页,页面不可单击
- Ajax 分页链接自定义
- 使用 Ajax 分页时缺少元素(Facebook 赞按钮)
- Ajax 和 PHP 重新加载分页时无法弄清楚
- 在 AJAX 分页中添加类“活动”
- 分页如何正确生成数据表(ajax,服务器端)
- 使用服务器端分页链接进行 ajax 无限滚动
- 以 php 为单位进行分页.AJAX,PHP,MYSQL
- 分页AJAX,需要包括js所有的时间
- 分页Ajax在Rails中工作不一致