jQuery：从选择选项中对每页项目进行分页？

Question

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

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

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

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

我确实尝试过alert();Itemoption，一旦选择了选择选项，它工作正常，我在警告框中得到了值，但我不明白为什么当我尝试使用它时它不起作用值就像我在上面的代码中解释的那样。

任何帮助将不胜感激。

Answer 1

这应该可行。可以试试吗？

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);
        }
    });
});