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

 插件官网地址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);
   }
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值