jQuery：从选择选项每页的项目分页？

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

我的分页工作时没有选择选项，但当我涉及选择选项部分。分页停止工作，并且选择选项部分也不工作。

我创造了这个的jsfiddle来解释这个问题：在代码 https://jsfiddle.net/q5rgLwb8/5/

当我改变了itemperPage = Itemoption;到itemperPage = 2;或itemperPage = *ANY NUMBER*;分页再次开始工作上面。

我曾尝试alert();Itemoption一旦选择选项，它工作正常，我得到的警报框中的值，但我不明白为什么它不起作用，当我尝试使用值我在上面的代码中解释的方式。

任何帮助，将不胜感激。

来源

2015-04-03 H.HISTORY

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

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

来源

2016-02-25 19:14:32

jQuery：从选择选项每页的项目分页？

回答

相关问题