建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery支持异步跳转的独立分页插件bPage

来源:易助科技网浏览量:9收藏

简介

bPage是基于 jQuery、Bootstrap2、3 进行开发,支持页面跳转、异步页面、异步数据等多模式的独立分页插件。


插件特点:

1)支持 Bootstrap2、3 的 UI 环境

2)带有页面跳转、异步页面(服务端返回页面内容模式)、异步数据(服务端返回 JSON 数据)三种分页模式,可对业务场景进行灵活处理

3)快速使用皮肤

4)浏览器支持 IE8+,chrome,firefox



使用

1.  引入文件

在网页上引用css样式、js脚本等文件


<!-- 插件使用的样式表文件,分bootstrap2和bootstrap3两个环境使用,根据使用环境引用 -->
<!-- bootstrap2环境使用 -->
<link rel="stylesheet" href="b.page.css" type="text/css">

<!-- bootstrap3环境使用 -->
<link rel="stylesheet" href="b.page.bootstrap3.css" type="text/css">

<!-- 插件核心脚本 -->
<script type="text/javascript" src="b.page.js" >< /script>


2.  HTML


<!-- 页面跳转模式为例 -->
<!-- 前提条件为服务端已将分页数据设置到request中 -->
<!-- 设置表格,内容区域中使用服务端的el表达式循环生成表格内容 -->
<table class="bTable table table-striped table-bordered table-hover table-condensed">
  <thead>
    <tr>
      <th class="selectColumn" >选择</th>
      <th>登录名</th>
      <th>姓名</th>
      <th>性别</th>
      <th>出生年月</th>
      <th>电话</th>
      <th>电子邮箱</th>
      <th>状态</th>
      <th>更新时间</th>
    </tr>
  </thead>
  <tbody>
    <c:if test="${userList.list != null}" <c:forEach var="d" items="${userList.list}">
      <tr class="<c:if test="${d.status == 0}">error</c:if>" id="${d.id}">
        <td class="selectColumn"><input type="radio" name="userSelect" value="${d.id}" /></td>
        <td>${d.login_name}</td>
        <td>${d.name}</td>
        <td>${d.sexName}</td>
        <td><fmt:formatDate pattern="yyyy-MM-dd" value="${d.birthday}" type="date" /></td>
        <td>${d.phone1}</td>
        <td>${d.email}</td>
        <td>${d.statusName}</td>
        <td><fmt:formatDate pattern="yyyy-MM-dd" value="${d.update_time}" type="date" /></td>
      </tr>
    </c:forEach></c:if>
  </tbody>
</table>

<!-- 必须设置以下分页信息设置,否则插件将无法读取分页数据-->
<!-- 隐藏内容设置后,在插件初始化时进行读取-->
<c:if test="${userList != null}">
  <input type="hidden" id="pageNumber" value="${userList.pageNumber}">
  <input type="hidden" id="pageSize" value="${userList.pageSize}">
  <input type="hidden" id="totalPage" value="${userList.totalPage}">
  <input type="hidden" id="totalRow" value="${userList.totalRow}">
</c:if>


3.  调用


//初始化插件
$('#page1').bPage({
  //分页目标链接
  url : $webroot + 'demo/manage/page',
  
  //读取页面设置的分页参数
  totalPage : $('#totalPage').val(),
  totalRow : $('#totalRow').val(),
  pageSize : $('#pageSize').val(),
  pageNumber : $('#pageNumber').val(),
  
  //自定义传递到服务端的参数
  params : function(){
    return {
      userName : 'zhangsan',
      age : 42
    };
  }
});



相关链接

官方文档(中文):https://terryz.github.io/bpage/index.html

GitHub 地址 :https://github.com/TerryZ/bPage

Gitee 地址 :https://gitee.com/TerryZ/bPage