jQuery 分页显示多个元素
我正在尝试使用 分页插件 对某些项目搜索结果进行分页。不幸的是,在显示多个结果时,演示和文档并不是很清楚。至少我是这么感觉的...
所以无论如何,看来我需要在回调函数中编写自己的 Skip 和 Take 代码才能获得我需要的结果。这是我到目前为止所得到的:
function setupPagination(num_items) {
var num_entries = $('#hiddenItemsContainer div.indexItem').length;
// Create pagination element
$("#paginationWidget").pagination(num_entries, {
current_page: 0,
items_per_page: num_items,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
callback: pageselectCallback,
num_edge_entries: 1
});
}
function pageselectCallback(page_index, jq){
var num_entries = $('#hiddenItemsContainer div.indexItem').length;
var items_per_page = $('#ItemsPerPage').val();
var newcontent = ($('#hiddenItemsContainer div.indexItem').slice(Math.min((page_index+1) * items_per_page), items_per_page)).clone();
console.log(newcontent);
// Replace old content with new content
$('#itemsContainer').empty().html(newcontent);
return false;
}
我不断得到一个空数组作为 newContent
的值。所以我使用 slice
函数的方式肯定有问题。
有什么想法吗?
更新:
问题已解决。我终于想通了!解决方案如下:
function pageselectCallback(page_index, jq){
console.log(page_index);
var num_entries = $('#hiddenItemsContainer div.indexItem').length;
var items_per_page = $('#ItemsPerPage').val();
var newcontent = ($('#hiddenItemsContainer div.indexItem').slice(Math.min(page_index * items_per_page), ((page_index + 1) * items_per_page))).clone();
console.log(newcontent);
// Replace old content with new content
$('#itemsContainer').html(newcontent);
return false;
}
但还有一件事......有没有办法将 items_per_page
值传递给回调函数?我必须将其保存在隐藏字段中才能访问它,这是没有意义的......
I'm trying to use the Pagination Plugin to paginate some item search results. Unfortunately, the demos and documentation aren't very clear when it comes to displaying more than one result. At least that's what I felt...
So anyway, it seems that I need to write my own Skip and Take code inside the callback function in order to get the result I need. Here's what I've got so far:
function setupPagination(num_items) {
var num_entries = $('#hiddenItemsContainer div.indexItem').length;
// Create pagination element
$("#paginationWidget").pagination(num_entries, {
current_page: 0,
items_per_page: num_items,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
callback: pageselectCallback,
num_edge_entries: 1
});
}
function pageselectCallback(page_index, jq){
var num_entries = $('#hiddenItemsContainer div.indexItem').length;
var items_per_page = $('#ItemsPerPage').val();
var newcontent = ($('#hiddenItemsContainer div.indexItem').slice(Math.min((page_index+1) * items_per_page), items_per_page)).clone();
console.log(newcontent);
// Replace old content with new content
$('#itemsContainer').empty().html(newcontent);
return false;
}
I keep getting an empty array as the value of newContent
. So it has to be something wrong with the way I'm using the slice
function.
Any thoughts?
UPDATE:
Problem solved. I finally figured it out! Here's the solution:
function pageselectCallback(page_index, jq){
console.log(page_index);
var num_entries = $('#hiddenItemsContainer div.indexItem').length;
var items_per_page = $('#ItemsPerPage').val();
var newcontent = ($('#hiddenItemsContainer div.indexItem').slice(Math.min(page_index * items_per_page), ((page_index + 1) * items_per_page))).clone();
console.log(newcontent);
// Replace old content with new content
$('#itemsContainer').html(newcontent);
return false;
}
But one more thing... Is there a way to pass the items_per_page
value to the callback function? It doesn't make sense that I have to save it in a hidden field just so I could access it...
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论