当页码增加到3时，我想添加上一个和下一个按钮

Question

我正在使用此示例来设置分页。我想在页面超出数据时添加下一个和上一个按钮。并且必须显示2个按钮但是当时我只是获取行中的页面

＆＃13;

＆＃13;

$('td', 'table').each(function(i) {
    $(this).text(i+1);
});



$('table.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = 10;
    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');
    

    
    
    
    
});

＆＃13;

table {
    width: 40em;
    margin: 2em auto;
}

thead {
    background: #000;
    color: #fff;
}

td {
    width: 10em;
    padding: 0.3em;
}

tbody {
    background: #ccc;
}

div.pager {
    text-align: center;
    margin: 1em 0;
}

div.pager span {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    line-height: 1.8;
    text-align: center;
    cursor: pointer;
    background: #000;
    color: #fff;
    margin-right: 0.5em;
}

div.pager span.active {
    background: #c00;
}

＆＃13;

<table class="paginated">
    <thead>
        <tr>
            <th scope="col">A</th>
            <th scope="col">B</th>  
            <th scope="col">C</th> 
            <th scope="col">D</th>
        </tr>

＆＃13;

＆＃13;

＆＃13;

 `http://jsfiddle.net/djav37tg/777/`

但我希望当我超过3页时，必须出现下一个按钮。