jQuery 分页显示多个元素

发布于 2024-11-07 21:17:19 字数 1891 浏览 0 评论 0原文

我正在尝试使用 分页插件 对某些项目搜索结果进行分页。不幸的是,在显示多个结果时,演示和文档并不是很清楚。至少我是这么感觉的...

所以无论如何,看来我需要在回调函数中编写自己的 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文