分页按钮动态崩溃，如果超过10页，Bootstrap分页

Question

我正在尝试为父DIV中的div元素构建自定义分页控件，例如div_photos。所以在父div下我有超过500个子div（实际上是缩略图）就像这样。

<div id='div_photos'>
<div class='tile'><img src='myurl'></div>
<div class='tile'><img src='myurl'></div>
<div class='tile'><img src='myurl'></div>
.........
<div class='tile'><img src='myurl'></div>
</div>

所以我在下面进行了分页控制

<div class="row"><div class="col-md-2 col-lg-2 col-sm-2">
     <h3 class=" page-info" style="margin-top:14px;"></h3>
     </div>
<div class="col-md-10 col-lg-10 col-sm-10">
      <div class="pagination pagination-large pull-right">
            <ul class="pager"></ul>
      </div>
</div>
</div>

这是用于创建paginator

的Jquery

var bindPaginator = function () {
    var listElement = $('#div_photos');

    var numItems = listElement.children().size();
    var numPages = Math.ceil(numItems / perPage);

    $('.pager').data("curr", 0);
    $('.pager').html('');
    var curr = 0;
    while (numPages > curr) {
        $('<li><a href="javascript:;" class="page_link">' + (curr + 1) + '</a></li>').appendTo('.pager');
        curr++;
    }

    $('.pager .page_link:first').addClass('active');

    listElement.children().css('display', 'none');
    listElement.children().slice(0, perPage).css('display', 'block');

    $('.pager li a').click(function () {
        var index = $(this).parents('li:first').index();
        $('.pager:first li').eq(index).find('a').css({ 'background-color': '#337ab7', 'color': 'white', 'font-weight': 'bold' });
        $('.pager:first li').not(':eq(' + index.toString() + ')').find('a').css({ 'background-color': 'white', 'color': '#337ab7', 'font-weight': 'normal' });
        $('.pager:last li').eq(index).find('a').css({ 'background-color': '#337ab7', 'color': 'white', 'font-weight': 'bold' });
        $('.pager:last li').not(':eq(' + index.toString() + ')').find('a').css({ 'background-color': 'white', 'color': '#337ab7', 'font-weight': 'normal' });
        var clickedPage = $(this).html().valueOf() - 1;
        goTo(clickedPage, perPage);
    });
    showPagerInfo(0);
};
function previous() {
    var goToPage = parseInt($('.pager').data("curr")) - 1;
    if ($('.active').prev('.page_link').length == true) {
        goTo(goToPage);
    }
}

function next() {
    goToPage = parseInt($('.pager').data("curr")) + 1;
    if ($('.active_page').next('.page_link').length == true) {
        goTo(goToPage);
    }
}

function goTo(page) {

    var startAt = page * perPage,
      endOn = startAt + perPage;
    var listElement = $('#div_photos');
    listElement.children().css('display', 'none').slice(startAt, endOn).css('display', 'block');
    $('.pager').attr("curr", page);
    showPagerInfo(page);

}
function showPagerInfo(page)
{
 .....
}

现在它使用全局变量 perpage 显示每页28个div。但是当有很多页面时，页面数量会很多而且看起来很笨拙。而不是我们如何动态显示分页器，因为JQUERY数据表会根据总页面自动调整。 10之后的页码显示为......以及最后显示的几个数字，当它达到10或9时隐藏的数字显示

以下是当前设置的外观