선택 옵션으로 TR을 표시하는 페이지 매김 테이블

Question

기본 페이지 매기기의 경우이 스크립트를 사용합니다.

$('table.paginated').each(function() { 
var currentPage = 0; 
var numPerPage = 5; 
var $table = $(this); 
$table.bind('repaginate', function() { 
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
}); 
$table.trigger('repaginate'); 
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"></span>').text(page + 1).bind('click', { 
     newPage: page 
    }, function(event) { 
     currentPage = event.data['newPage']; 
     $table.trigger('repaginate'); 
     $(this).addClass('active').siblings().removeClass('active'); 
    }).appendTo($pager).addClass('clickable'); 
} 
$pager.insertBefore($table).find('span.page-number:first').addClass('active'); 
}); 

완벽하게 작동합니다. 하지만 선택에서 "numPerPage"설정에 대한 솔루션을 사용하고 싶습니다. 선택 양식 배열을 추가했습니다. 이것은 페이지 매김을위한 스크립트 전에 여전히 간단합니다.

// Create selection from Array 
    var arr = [ 
     {val : 1000, text: 'All'}, 
     {val : 5, text: '5'}, 
     {val : 10, text: '10'}, 
     {val : 15, text: '15'}, 
     {val : 20, text: '20'} 
    ]; 

    var sel = $('<select id="selectionPerPage">').appendTo('#selection'); 
    $(arr).each(function() { 
     sel.append($("<option>").attr('value',this.val).text(this.text)); 
    }); 

그런 다음 선택 변경 기능을 추가했습니다.

// Set value after selection 
    $('#selectionPerPage').change(function() { 
     // value and cookie 
     var numPerPage = $(this).val(); 
    }); 

"numPerPage"값으로 TR을 표시하는 솔루션을 찾아야합니다. 선택 항목의 값을 변경하면 해결책이 필요합니다. 뿐인 http://jsfiddle.net/skyndas/hv979kn6/15/에서

전체 스크립트

Answer 1

확인이 jsfiddle, 난 당신을 위해 작동합니다.

jsfiddle : http://jsfiddle.net/vasantharaj/hv979kn6/24/