Question

我正在尝试使用jQuery模拟分页并制定了所有必要的分页元素，但无法使导航部分工作。它使用了list元素，但没有使用此表结构。有人可以告诉我可能是什么问题吗？

var show_per_page = 2;
var number_of_items = $('tbody').children().size();
var number_of_pages = Math.ceil(number_of_items / show_per_page);
var current_link = 0;

$('table').after('<div class=controls></div>');
var navigation_html = '<a class="prev" onclick="previous()">...</a>';

while (number_of_pages > current_link) {
  navigation_html += '<a class="page" onclick="go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
  current_link++;
}
navigation_html += '<a class="next" onclick="next()">...</a>';

$('.controls').html(navigation_html);
$('.controls .page:first').addClass('active');

$('tbody').children().hide();
$('tbody').children().slice(0, show_per_page).show();

function go_to_page(page_num) {
  start_from = page_num * show_per_page;
  end_on = start_from + show_per_page;

  $('tbody').children().hide().slice(start_from, end_on).show();

  $('.page[longdesc=' + page_num + ']').addClass('active').siblings('.active').removeClass('active');

}

function previous() {
  new_page = current_link - 1;

  if ($('.active').prev('.page').length == true) {
    go_to_page(new_page);
  }
}

function next() {
  new_page = current_link + 1;

  if ($('.active').next('.page').length == true) {
    go_to_page(new_page);
  }
  $("a.prev").show();

}

演示JS Fiddle

Answer 1

嗯，我能看到的直接问题与功能范围有关。我会告诉你，你添加到链接的go_to_page函数超出范围，而不是解决它。

编辑：看起来这是一个小问题。

Answer 2

您的代码有效，它必须与JSfiddle包装函数名称

我在本地文件上运行你的代码，只需要包含jquery。

这是我使用的完整代码：https://gist.github.com/kEpEx/4422d441dbd0b71dfd3d

Answer 3

我将JS Fiddle Javascript设置更改为No Wrap - in <body>并明确包装了load函数，现在可以正常工作了。

表格与jQuery分页

3 个答案: