jQuery动态分页bootpag插件

页面上显示部分：

<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();
            });

}

在后台只需要将数据传递到页面上即可