jQuery動態分頁bootpag外掛程式__JavaScript

頁面上顯示部分：

<div class="box-tools">
   <div id="pagination" style="margin-top: 10px;">
      <ul class="pagination bootpag">
        <li data-lp="1" class="first disabled"><a href="javascript:void(0);">首頁</a></li>
        <li data-lp="1" class="prev disabled"><a  href="javascript:void(0);">«</a></li>
        <li data-lp="1" class="active"><a  href="javascript:void(0);">1</a></li>
        <li data-lp="2"><a href="javascript:void(0);">2</a></li>
        <li data-lp="3"><a href="javascript:void(0);">3</a></li>
        <li data-lp="4"><a href="javascript:void(0);">4</a></li>
        <li data-lp="5"><a href="javascript:void(0);">5</a></li>
        <li data-lp="6"><a href="javascript:void(0);">6</a></li>
        <li data-lp="7"><a href="javascript:void(0);">7</a></li>
        <li data-lp="8"><a href="javascript:void(0);">8</a></li>
        <li data-lp="2" class="next"><a href="javascript:void(0);">»</a></li>
        <li data-lp="8" class="last"><a href="javascript:void(0);">尾頁</a></li>
      </ul>
    </div>

</div>

$(function () {
          $('[data-toggle="popover"]').popover();
          $('#pagination').bootpag({
                total: '${page.totalPages}',                //一共多少頁
                page: '${page.number + 1}',                 //當前顯示的頁數，該組件是從1開始
                maxVisible: 10,                            //可以看見的頁數
                firstLastUse: true,
                first: '首頁',
                last: '尾頁',
                wrapClass: 'pagination',
                activeClass: 'active',
                disabledClass: 'disabled',
                nextClass: 'next',
                prevClass: 'prev',
                lastClass: 'last',
                firstClass: 'first'
            }).on("page", function(event, num){//您所點擊的頁面對應的頁數，是從1開始
                  $("#p").val(num);
                  $("#query_form").submit();
            });

}

在後台只需要將資料傳遞到頁面上即可