Question

我决定在PacktPub使用该教程，主要是因为我不需要DataTable的所有功能，我不想花费大量时间试图让它完全按照我的样式进行设置想要它。

本教程的问题在于分页。我不希望它看起来像这样：

1 2 [3] 4 5

相反，我希望它看起来像

< [#] >

[＃]将是一个输入字段，用户可以输入一个数字，它将自动转到该页面。它们两侧的箭头将根据其打开的页面和页面数量禁用和启用。例如，如果它在第1页，那么＆lt;按钮会有一个“关闭”类。如果有超过1页，那么＆gt;按钮将使用“on”类设置样式。

我附上了我可能希望它看起来的截图：

（图片不可用）

我对使用此代码实现此目标感到有些困惑：

$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;

var $table = $(this);

$table.bind('repaginate', function() {
  $table.find('tbody tr').show()
    .lt(currentPage * numPerPage)
      .hide()
    .end()
    .gt((currentPage + 1) * numPerPage - 1)
      .hide()
    .end();
});

var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);

var $pager = $('<div class="pager"></div>');
for (var page = 0; page < numPages; page++) {
  $('<span class="page-number">' + (page + 1) + '</span>')
   .bind('click', {'newPage': page}, function(event) {
     currentPage = event.data['newPage'];
     $table.trigger('repaginate');
     $(this).addClass('active').siblings().removeClass('active');
   })
   .appendTo($pager).addClass('clickable');
}
$pager.find('span.page-number:first').addClass('active');
$pager.insertBefore($table);

$table.trigger('repaginate'); }); });

Answer 1

我会考虑这样的分页。

<div class="pager">
  <span class="clickable left-arrow"></span>
  <input type="text" name="pagerbox" value="1" />
  <span class="clickable right-arrow"></span>
</div>

这是我的解决方案。

// This function will disabled or enabled the right arrows, depending
// on the currentPage value.
var checkPagerArrows() = function() {   
  $leftArrow.removeClass('disabled');       
  if(currentPage == 0){ $leftArrow.addClass('disabled'); }   
  $rightArrow.removeClass('disabled');   
  if(currentPage == (numPages - 1){ $rightArrow.addClass('disabled'); } 
};

// This functions moves to a specified page. Handles validation.
var goToPage = function(pageNumber){
  var pageTo = parseInt(pageNumber);
  // Makes sure pageTo is a number and is in a valid page range
  if(isNaN(pageTo ) || pageTo < 0 || pageTo > (numPages - 1)){
    // Enter your code for error messages, or custom control
    return;
  }
  currentPage = pageTo;
  checkPagerArrows();
  $table.trigger('repaginate');
};

var $pager = $('<div class="pager"></div>');

// Create the left arrow.
var $leftArrow = $('<span class="clickable left-arrow"></span>')
  // Add the click functionality.
  .click(function(){ goToPage(currentPage - 1); })
  // Append to pager.
  .appendTo($pager);

// Create the input box.
var $pagerBox = $('<input type="text" name="pagerbox" value="1" />')
  // Add functionality
  .change(function(){
    var pageVal = parseInt($(this).attr('value'));
    if(isNaN(pageVal)){ return; }
    goToPage(pageVal - 1); // Make it zero based.
  })
  .appendTo($pager);

var $rightArrow = $('<span class="clickable right-arrow"></span>')
  .click(function(){ goToPage(currentPage + 1); })
  .appendTo($pager);

$pager.insertBefore($table);

记住：要对用户输入进行验证。

jQuery分页 - 如何适应不同的格式

1 个答案: