jQuery:根据select选项中的每页项目进行分页

jQuery: pagination with item per page from select option?

本文关键字：项目 分页 根据 select 选项 jQuery      更新时间：2023-09-26

我正在使用jquery创建一个分页，我希望允许用户使用选择下拉菜单选择页面上显示的结果/项目的数量。

我的分页在没有选择选项的情况下工作，但当我涉及选择选项部分时。分页停止工作，选择选项部分也永远不会工作。

我创建了这个jsfiddle来解释这个问题：https://jsfiddle.net/q5rgLwb8/5/

在上面的代码中，当我将itemperPage = Itemoption;更改为itemperPage = 2;或itemperPage = *ANY NUMBER*;时，分页再次开始工作。

一旦选择了select选项，我确实尝试了alert();和Itemoption，它运行良好，并且我在警报框中得到了值，但我不明白为什么当我尝试像上面代码中解释的那样使用该值时它不起作用。

任何帮助都将不胜感激。

这应该可以工作。你能试试吗？

var countries = [];
var per_page = 10;
function generate_pagination(per_page) {
    var pagination_links = countries.length / per_page;
    var pagination_length = Math.ceil(pagination_links);
    $('#pagination').html('');
    for (var i = 1; i <= pagination_length; i++) {
        $('#pagination').append('<a href="#" class="page">' + i + '</a>');
    }
}
function display_countries(start, end) {
    $('.new').html('');
    for (var i = 0; i < countries.length; i++) {
        if (i >= start && i < end) {
            $('.new').append('<tr><td>' + (i + 1) + ": " + countries[i] + '</td><td>Action</td></tr>');
        }
    }
}
$(document).ready(function () {
    $("#displayvalues").change(function () {
        per_page = $(this).find("option:selected").val()
        var end = 1 * per_page;
        var start = 0;
        display_countries(start, end);
        generate_pagination(per_page);
    })
    $('body').on('click', '.page', function () {
        var page_no = $(this).html();
        var end = page_no * per_page;
        var start = end - per_page;
        display_countries(start, end);
        return false;
    })
    $.ajax({
        url: './countries.php',
        type: 'GET',
        data: { countries: true },
        cache: false,
        async: true,
        dataType: 'json',
        success: function (data) {
            countries = data.countries;
            generate_pagination(per_page);
            display_countries(0, per_page);
        }
    });
});
相关文章：