jQuery分页插件 [英] jQuery Pagination Plugin
问题描述
希望这是一个很容易解决的问题。我在理解 jQuery Pagination 插件时遇到了一些问题。
Hopefully this is something that will be easy to remedy. I'm having a bit of an issue understanding the jQuery Pagination plugin.
基本上,我要做的就是加载一个PHP文件,然后对结果进行分页。我试图摆脱他们的榜样,但我并没有产生我正在寻找的结果。
Essentially, all I am trying to do is load a PHP file, and then paginate the results. I'm attempting to go off their example, but I am not yielding the results I'm looking for.
这是JavaScript:
Here's the JavaScript:
function pageselectCallback(page_index, jq){
var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:3
});
}
$(document).ready(function(){
$('#hiddenresult').load('load.php', null, initPagination);
});
这是我的HTML(在加载PHP之后):
Here's my HTML (after the PHP has been loaded):
<div id="Pagination" class="pagination"> </div>
<br style="clear:both;" />
<div id="Searchresult"> </div>
<div id="hiddenresult" style="display:none;">
<div class="result">Result #1</div>
<div class="result">Result #2</div>
<div class="result">Result #3</div>
<div class="result">Result #4</div>
<div class="result">Result #5</div>
<div class="result">Result #6</div>
<div class="result">Result #7</div>
</div>
基本上,我试图在每页显示3项,但这不起作用。我假设在某个地方,我将需要在我的JS中创建一个for循环,但我很困惑如何这样做。 可在此处找到文档。
Basically, I am trying to show "3" items per page, but this is not working. I'm assuming that somewhere, I am going to need to create a for loop in my JS, but I'm confused on how to do so. The documentation can be found here.
推荐答案
你甚至不需要使用for循环,只需使用jQuery的 slice()
方法和一些数学。
You don't even need to use a for loop, just use jQuery's slice()
method and a bit of math.
我在JS Bin上主持了一个工作演示: http://jsbin.com/upuwe (可通过 http:// jsbin编辑。 com / upuwe / edit )
I've hosted a working demo on JS Bin: http://jsbin.com/upuwe (Editable via http://jsbin.com/upuwe/edit)
以下是修改过的代码:
var pagination_options = {
num_edge_entries: 2,
num_display_entries: 8,
callback: pageselectCallback,
items_per_page:3
}
function pageselectCallback(page_index, jq){
var items_per_page = pagination_options.items_per_page;
var offset = page_index * items_per_page;
var new_content = $('#hiddenresult div.result').slice(offset, offset + items_per_page).clone();
$('#Searchresult').empty().append(new_content);
return false;
}
function initPagination() {
var num_entries = $('#hiddenresult div.result').length;
// Create pagination element
$("#Pagination").pagination(num_entries, pagination_options);
}
这篇关于jQuery分页插件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!