Jquery 分页按钮在超过10页时动态折叠，引导分页

我正在尝试为父div-say div_-photos中的div元素构建一个自定义分页控件。所以在parent 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)
{
 .....
}

var bindPaginator=函数（）{
变量listElement=$（“#div_照片”）；
var numItems=liselement.children（）.size（）；
var numPages=Math.ceil（numItems/每页）；
$（'.pager'）。数据（“当前”，0）；
$（'.pager'）.html（''）；
var curr=0；
而（数值>当前值）{
$（'
'）。附加到（'.pager'）；
curr++；
}
$（'.pager.page_link:first'）.addClass（'active'）；
css（'display'，'none'）；
liselement.children（）.slice（0，每页）.css（'display'，'block'）；
$（'.pager li a'）。单击（函数（）{
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；
转到（单击页面，每页）；
});
showPagerInfo（0）；
};
函数previous（）{
var goToPage=parseInt（$（'.pager'）.data（“curr”））-1；
if（$（'.active'）.prev（'.page_link'）.length==true）{
后藤（后藤）；
}
}
函数next（）{
goToPage=parseInt（$（'.pager'）.data（“curr”））+1；
if（$（'.active_page'）。next（'.page_link'）。length==true）{
后藤（后藤）；
}
}
功能转到（第页）{
var startAt=每页*页，
endOn=startAt+每页；
变量listElement=$（“#div_照片”）；
css（'display'，'none'）.slice（startAt，endOn）.css（'display'，'block'）；
$（'.pager'）.attr（“curr”，第页）；
showPagerInfo（第页）；
}
函数showPagerInfo（第页）
{
.....
}

现在，它使用全局变量perpage显示每页28个div。但是当有很多图钉的时候，页数就会很多，看起来很糟糕。相反，当JQUERY datatable根据总页面自动调整时，我们如何动态显示分页器。类似于10后的页码显示为。。。最后几个数字显示，当它达到10或9时，隐藏的数字显示

以下是当前设置的外观