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

我决定在上使用教程，主要是因为我不需要DataTable的所有功能，也不想花太多时间来尝试按照我想要的方式设计它

我对本教程的问题是分页。我不想让它看起来像这样：

1 2 [3] 4 5

相反，我希望它看起来像

< [#] >

<[#]>

[#]将是一个输入字段，用户可以在其中输入一个数字，它将自动转到该页面。两侧的箭头将根据其所在页面和页面数量禁用和启用。例如，如果它在第1页，那么<按钮将有一个“off”类。如果有超过1个页面，那么>按钮的样式将为类“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'); }); });

$（文档）.ready（函数（）{
$（'table.paginated'）。每个（函数（）{
var-currentPage=0；
var numPerPage=10；
var$表=$（此）；
$table.bind（'repaginate'，function（）{
$table.find（'tbody tr'）.show（）
.lt（当前页*numPerPage）
.hide（）
(完)
.gt（（当前页+1）*numPerPage-1）
.hide（）
.end（）；
});
var numRows=$table.find（'tbody tr'）.length；
var numPages=Math.ceil（numRows/numPerPage）；
变量$pager=$（''）；
对于（变量页面=0；页面<代码> > p>我会考虑这样的分页。

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

//此功能将禁用或启用右箭头，具体取决于
//在当前页面的值上。
var checkPagerRows（）=函数（）{
$leftArrow.removeClass（'disabled'）；
如果（currentPage==0）{$leftArrow.addClass（'disabled'）；}
$rightArrow.removeClass（'disabled'）；
如果（currentPage==（numPages-1）{$rightArrow.addClass（'disabled'）；}
};
//此函数移动到指定页。处理验证。
var goToPage=函数（页码）{
var pageTo=parseInt（页码）；
//确保pageTo是一个数字并且在有效的页面范围内
如果（isNaN（pageTo）| pageTo<0 | | pageTo>（numPages-1））{
//输入错误消息或自定义控件的代码
返回；
}
currentPage=pageTo；
checkPagerRows（）；
$table.trigger（'repaginate'）；
};
变量$pager=$（''）；
//创建左箭头。
变量$leftArrow=$（''）
//添加单击功能。
。单击（函数（）{goToPage（currentPage-1）；}）
//附加到寻呼机。
.appendTo（$pager）；
//创建输入框。
变量$pagerBox=$（''）
//添加功能
.change（函数（）{
var pageVal=parseInt（$（this.attr（'value'））；
if（isNaN（pageVal））{return；}
goToPage（pageVal-1）；//使其以零为基础。
})
.appendTo（$pager）；
变量$rightArrow=$（''）
。单击（函数（）{goToPage（currentPage+1）；}）
.appendTo（$pager）；
$pager.insertBefore（$table）；

记住：对用户输入进行验证。
天哪！你真是一个梦想！非常感谢你，这真是太有魅力了！@michael，很抱歉劫持它，但我有一个问题。在你的设置中，如果（例如）单击演示版面，你是否有一个详细页面？我在从详细页面返回结果页面时遇到问题。有什么提示吗？图像丢失。