bootpag js与json数据分页

Question

我无法获得bootpag（或任何分页，包括easyPaginate，simplePagination和pagerJS）以正确使用我为自己创建div的json列表。我已经阅读了一些其他主题，说你必须告诉它隐藏你的div并调用更新然后生成列表，但我被卡住了。

我是js的新手，我尝试了很多东西但没有工作。有任何想法吗？我的代码如下。

var data = [
  { title:'title1', alias:'coll1', description:'description1', },
  { title:'title2', alias:'coll2', description:'description2', },
  { title:'title3', alias:'coll3', description:'description3', },
  { title:'title4', alias:'coll4', description:'description4', },

]

data.sort(function(a, b){
var titleA=a.title.toLowerCase(), titleB=b.title.toLowerCase();
if (titleA < titleB) //sort string ascending
return -1;
if (titleA > titleB)
return 1;
return 0; //default return value (no sorting)
});

var collectionData= '';

for ( var key in data ) {
collectionData += '<div class="hvrbox">';
collectionData += '<div class="hvrbox-title"><h5>' + data[key].title + '</h5></div>';
collectionData += '<img src="http://placekitten.com/g/200/200" class="hvrbox-layer_bottom">';
collectionData += '<div class="hvrbox-layer_top hvrbox-layer_slideup"><div class="hvrbox-text"><a href="#">';
collectionData += data[key].description + '</div><i class="fa fa-angle-double-right"></i>';
collectionData += '</a>';
collectionData += '</div></div>';
}


$('#collectionWrapper').append(collectionData);

$(document).ready(function() {
  $('#pagination').bootpag({
            total: 4,
            page: 1,
            maxVisible:1,
        }).on('page', function(event, num){
             $('#collectionWrapper').html("Page" + num); // some ajax content loading...

        });
});

/*container for collections list*/
#collectionWrapper {
  grid-area: collectionWrapper;
  display: grid;
  grid-gap: 30px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.hvrbox,
.hvrbox * {
  box-sizing: border-box;
}

.hvrbox {
  position: relative;
  display: inline;
  overflow: hidden;
  height: auto;
  width: 100%;
}

.hvrbox-title {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0;
  top: 0;
  min-width: 100%;
  height: auto;
  min-height: 12%;
  padding-top: 1.5%;
  padding-left: 1.5%;
  padding-right: 1.5%;
  text-align: center;
  color: white;
}

.hvrbox i {
  position: absolute;
  bottom:2%;
  right:3%;
  font-size: 3em;
  color:#E6AA3C;
}

.hvrbox img {
  width: 100%;
}

.hvrbox-text a {
  text-decoration: none;
  color: #ffffff;
  font-weight: 400;
  padding: 5px;
}

.hvrbox .hvrbox-layer_bottom {
  display: block;
}

.hvrbox .hvrbox-layer_top {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 15px;
  -moz-transition: all 0.4s ease-in-out 0s;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -ms-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
  opacity: 1;
}

.hvrbox .hvrbox-text {
  text-align: center;
  font-size: 18px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 75%;
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.hvrbox .hvrbox-text_mobile {
  font-size: 15px;
  border-top: 1px solid rgb(179, 179, 179);
  /* for old browsers */
  border-top: 1px solid rgba(179, 179, 179, 0.7);
  margin-top: 5px;
  padding-top: 2px;
  display: none;
}

.hvrbox.active .hvrbox-text_mobile {
  display: block;
}

.hvrbox .hvrbox-layer_slideup {
  -moz-transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
}

.hvrbox:hover .hvrbox-layer_slideup,
.hvrbox.active .hvrbox-layer_slideup {
  -moz-transform: translateY(0);
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/botmonster/jquery-bootpag/master/lib/jquery.bootpag.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<div id="collectionWrapper">
</div>
<div id="pagination"></div>