Javascript jQuery:select选项中的每页项目分页?
我正在使用jquery创建分页,我希望允许用户使用选择下拉菜单选择页面上显示的结果/项目的数量 我的分页在没有选择选项的情况下有效,但在涉及选择选项部分时有效。分页停止工作,选择选项部分也永远不会工作 我创建了这个JSFIDLE来解释这个问题: 在上面的代码中,当我更改itemperPage=Itemoption时;至itemperPage=2;或itemperPage=*任何数字*;分页重新开始工作 我确实试着警觉;Itemoption一旦选择了select选项,它就可以正常工作,并且我在警报框中得到了该值,但我不明白当我尝试像上面代码中解释的那样使用该值时,它为什么不起作用Javascript jQuery:select选项中的每页项目分页?,javascript,jquery,pagination,Javascript,Jquery,Pagination,我正在使用jquery创建分页,我希望允许用户使用选择下拉菜单选择页面上显示的结果/项目的数量 我的分页在没有选择选项的情况下有效,但在涉及选择选项部分时有效。分页停止工作,选择选项部分也永远不会工作 我创建了这个JSFIDLE来解释这个问题: 在上面的代码中,当我更改itemperPage=Itemoption时;至itemperPage=2;或itemperPage=*任何数字*;分页重新开始工作 我确实试着警觉;Itemoption一旦选择了select选项,它就可以正常工作,并且我在警
任何帮助都将不胜感激。这应该行得通。你能试试吗
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);
}
});
});