jQuery分页插件 bPage(原创)

所属分类:导航-分页

 20127  54  查看评论 (34)
jQuery分页插件 bPage(原创) ie兼容8

bPage

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

主要特性

jQuery插件支持Bootstrap2、3的UI环境带有页面跳转、异步页面(服务端返回页面内容模式)、异步数据(服务端返回JSON数据)三种分页模式,可对业务场景进行灵活处理快速使用皮肤浏览器支持IE8+,chrome,firefox插件使用入门、API文档、使用实例

使用方法

资源导入 在网页上引用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>

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>

Javascript初始化插件代码

//初始化插件
$('#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
        };
    }
});
相关插件-分页

实用美观的jquery 分页

代码简单,运行速度快,兼容所有浏览器
  分页
 18649  151

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 16651  85

jQuery卡片分页插件

可用于对特定的数据绑定dom分页
  分页
 1488  5

jQuery分页插件bs_pagination

bs_pagination是jQuery分页插件,基于Bootstrap。完全可配置的,响应网页设计。
  分页
 38537  131

讨论这个项目(34)回答他人问题或分享插件使用方法奖励jQ币

    迁就 0
    2018/5/16 16:22:41
    请问我现在数据和排版都出来了,但是怎么实现分页效果
    回复
    ?queens? 0
    2018/3/23 11:01:23
    第三种方式的url是自己当前页面的路径吗?
        ?queens?0
        2018/3/23 11:02:26
        我设置了自己当前页面的url 后台控制器报错找不到页面
    回复
    TRAMP 0
    2018/1/19 18:28:48

    第三种模式。 请问有方法用于刷新reload数据吗

    回复
    REST 0
    2018/1/16 17:50:25

    请问,如果上方有一个搜索条件的表单,有一个提交按钮,点击提交要按条件触发检索并显示第一页,那如何触发呢

    回复
    I can only love you 0
    2018/1/1 13:35:53
    没服务器端支持  我在webstorm里面请求本地json文件为什么不行 回复
    Timothy。 0
    2017/10/6 15:41:39

    求助大佬:

    只有一个页面,关键代码如下:

    <div class="form-group">
        <label for="dt" class="col-md-1 control-label">时间</label>
        <div class="dt_container" style="width:174px;">
            <input id="dt" class="form_datetime dt_input" type="text" data-link-field="dt_input1">
            <div class="dt_clear_btn" title="清除内容">×</div>
            <input type="hidden" class="dt_hidden" id="dt_input1" name="dtinput1">
        </div>
        <span>---</span>
        <div class="dt_container" style="width:174px;">
            <input class="form_datetime dt_input" type="text" data-link-field="dt_input2">
            <div class="dt_clear_btn" title="清除内容">×</div>
            <input type="hidden" class="dt_hidden" id="dt_input2" name="dtinput2">
        </div>
    </div>
    <input id="button" type="button" value="查询">

    请问如何实现,点击“查询”按钮,将时间参数传递到后台,并根据返回的json字符串中对应的分页栏参数,生成分页栏,后台分页功能处理的代码已完成。

    回复
    不吃鱼的大脸猫 ?? 0
    2017/9/7 10:10:28

    完全按照第三种模式粘的代码,出不来

        Terry0
        2017/9/7 10:42:51

        出不来是因为服务端返回的数据没有按照要求的格式输出

    回复
    smile蓿苜 0
    2017/8/14 15:47:40

    直接用的第3种渲染,#bPageDropList的选择切换没效果,有多少条数据全部都渲染出来了

        Terry0
        2017/8/14 16:21:40

        这种情况,通常是后端参数没接收好,请在浏览器的调试模式下观察发起请求的Headers中的Query String部分,这是向服务端请求的参数

        再观察Response中返回json内容,查看两个情况下的分页参数传递和接收是否正确

    回复
    人 活一种心态。 0
    2017/8/10 17:39:28

    请问一下 ,我使用的是第三种模式,表格的数据有渲染出来,但是分页并没有效果呢,是要设置什么地方嘛?

        Terry0
        2017/8/10 18:00:10

        第三种方式是ajax+JS自定义渲染的方式,如果分页没有效果的话,你检查一下你的服务端返回的分页信息有没有变化

        用浏览器的调试模式检查请求的分页参数和返回的分页参数就知道了

    回复
    玻璃杯。 0
    2017/8/10 15:58:35

    请问我用angular的$httppost方法请求下来的数据,可以用这个吗

        Terry0
        2017/8/10 18:04:18

        惭愧,angular还不会用,回答不了你这个问题

    回复
取消回复