jQuery Pagination - как адаптироваться к другому формату

Question

Я решил использовать учебник в PacktPub главным образом потому, что мне не нужны все функции DataTable, и я не хотел тратить много времени на то, чтобы получите его в стиле, как я этого хотел.

Моя проблема с этим учебником - это разбиение на страницы. Я не хочу, чтобы выглядеть следующим образом:

1 2 [3] 4 5 

Вместо этого я хочу, чтобы это выглядело как

< [#] > 

код [#] будет поле ввода, в котором пользователь может войти в номер и он автоматически перейдет на эту страницу. Стрелки с обеих сторон, они будут отключены и активированы в зависимости от того, на какой странице он находится и сколько страниц. Например, если он был на странице 1, то кнопка < будет иметь класс «выключен». Если было более 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'); }); }); 

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

ПОМНИТЕ: Выполнение проверки для ввода пользователем.