javascript 创建ajax分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10475235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating ajax pagination
提问by David542
I am trying to do an ajax pagination with the following code:
我正在尝试使用以下代码进行 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)
});
})
And in my view function:
在我看来功能：
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]))
However, there are two problems I'm running into. The first is that the responseis not really HTML, and has a bunch of n\t\t\n\t\t\n\t\n\t\n\t\n\t\t\n\t\, etc. Also, I'm having trouble keeping track of the current page/changing the url as needed. How would I build a functional ajax pagination here?
但是，我遇到了两个问题。第一个是它response不是真正的 HTML，并且有一堆n\t\t\n\t\t\n\t\n\t\n\t\n\t\t\n\t\，等等。此外，我无法跟踪当前页面/根据需要更改 url。我将如何在这里构建功能性 ajax 分页？
Update: I figured out the first one, by doing response = $.parseJSON(response);. How would I keep track of which page I am on though?
更新：我想出了第一个，通过做response = $.parseJSON(response);. 我将如何跟踪我在哪个页面上？
采纳答案by tim peterson
To keep track of the page, you can increment/decrement a variable on click with your AJAX function. Try this:
要跟踪页面，您可以使用 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)
});
})
I would also not use livemethod as it is deprecated as of jQuery 1.7. It has been replace by the onmethod. See the jQuery on()API here: http://api.jquery.com/on/
我也不会使用live方法，因为它从 jQuery 1.7 开始被弃用。它已被on方法取代。在on()此处查看 jQuery API：http: //api.jquery.com/on/
回答by Ali Aboussebaba
Check this tutorial about "Ajax Scroll Paging Using jQuery, PHP and MySQL", it may simplify your job: http://www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and-mysql
查看有关“使用 jQuery、PHP 和 MySQL 进行 Ajax 滚动分页”的教程，它可以简化您的工作：http: //www.bewebdeveloper.com/tutorial-about-ajax-scroll-paging-using-jquery-php-and- mysql
Here is the essential from:
这里是必不可少的：
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;
}
});
}
}
});
});
回答by Danilo Valente
Try using the javascript String.replace() method:
尝试使用 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)
});
})
回答by anna
jQuery.get(url, [data], [callback], [type])
type :xml, html, script, json, text, _default。
how about trying to define the last parameter as "html" ?
尝试将最后一个参数定义为“html”怎么样？
