前端分页插件【项目日常】

 插件官网地址：Bootstrap Pagination | labs.pontikis.net

该分页插件依赖jQuery和Bootstrap框架，所以需要保证jQuery和Bootstrap框架依赖已经引入：

  <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
  <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
  <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

导入下载好的分页插件依赖：

  <%-- 分页插件依赖--%>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination-master/css/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination-master/js/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination-master/localization/en.js"></script>

 因为分页插件没有提供汉化，所以需要手动翻译：

 

具体使用：

//对容器调用bs_pagination工具函数，显示翻页信息
jQuery("#demo_pag1").bs_pagination({
   currentPage: beginNum,//当前页号,相当于pageNo
   rowsPerPage: pageSize,//每页显示条数,相当于pageSize
   totalRows: data.activityTotal,//总条数
   totalPages: totalPages,  //总页数,必填参数.
   visiblePageLinks: 5,//最多可以显示的卡片数（分页栏页数）
   showGoToPage: true,//是否显示"跳转到"部分,默认true--显示
   showRowsPerPage: true,//是否显示"每页显示条数"部分。默认true--显示
   showRowsInfo: true,//是否显示记录的信息，默认true--显示

   //用户每次切换页号，都自动触发本函数;
   //每次返回切换页号之后的beginNum和pageSize
   onChangePage: function (event, pageObj) {
       //每次页码改变的时候重新执行分页查询函数（传入刚刚改变的页码和每页条数）页码无改变不会触发
       queryActivityByConditionForPage(pageObj.currentPage, pageObj.rowsPerPage);
   }
});