限制在自定义分页中显示的链接数

Question

现在用我的代码我看到所有页面，但我想限制链接数量。 如果我有10页，但我只想看到五页：   1 2 3 4 5，  5 6 7 8 9。 我怎样才能做到这一点？这是我的部分代码plunk demo

这是我的控制者：

var booksController = function () {
function all(context) {
  var size = 2,
        page = +context.params['page'] || 0;
    templates.get('books')
        .then(function (template) {
            var booksRef = firebase.database().ref('books');
            booksRef = booksRef.orderByChild('timestamp');
            booksRef.on('value', function (snapshot) {
                this.data = [];

                snapshot.forEach(function (child) {
                    this.data.push(child.val());
                }.bind(this));

                var pagesLen = Math.ceil(data.length / size),
                pages = [];

            for (var i = 0; i < pagesLen; i+= 1) {
                pages.push({
                    page: i,
                    displayPage: i + 1
                });
            }
            data = data.slice(page * size, (page + 1) * size);

                context.$element().html(template({
                    books: data,
                    pages: pages
                }));
            });
        });
}
 return { all: all };
}();

我的hadlebars模板：

<section id="primary-content">
<div class="wrapper">
    <h1 class="above">Books: </h1>
                {{#each books}} 
        <h1>{{title}}</h1>
        {{/each}}
    <div id="medium">
       </div> {{!--end medium--}}
        <ul class="pagination">
    {{#pages}}
        <li>
            <a class="btn btn-sm btn-default" href="#/books/{{page}}">{{displayPage}}</a>
        </li>
    {{/pages}}
</ul>
</div>