UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery分页插件 bPage(原创)

所属分类：导航-分页

 50889  335  查看评论 (41)
分享到微信朋友圈
X
jQuery分页插件 bPage(原创) ie兼容8
 查看演示  website  立即下载

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
        };
    }
});
相关插件-分页
查看更多

自制实用主义分页插件

 自制实用主义分页插件，分享给需要使用或者学习的人
  分页
 43357  450

jquery分页插件

 堪称完美jquery分页插件
  分页
 52916  403

bootstrap4的jquery分页插件

 bootstrap4的jquery分页插件，支持刷新不变页数
  分页
 39484  302

jQuery分页插件

 兼容IE8的分页插件，简单易用。
  分页
 37413  313

讨论这个项目（41）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    夹击妹抖 0
    2018/10/11 16:27:48
    大佬，建议你这个文档在完善一下，说明一下页码和那个每页数据量这两个参数在什么地方取。我后台先是用形参取值没取到，然后在浏览器上看请求域里的参数，我不知道是我浏览器问题还是什么，结果看不到，瞎折腾了一个多小时，最后才在后台请求域里看到页码和其他几个参数。
    有个问题不解，为什么参数的值要放到数组里面？ 回复
    夹击妹抖 0
    2018/10/11 10:18:32
    大佬，怎么获取当前页页码跟每页条数？我要往后台传这两个参数，但是前台怎么拿到这两个参数？ 回复
    机智的二愣子 0
    2018/10/10 14:17:33

    作者大大，我想刷新表格，刷新的时候可以携带业务参数和分页信息到后台，不过，携带的分页信息总是缺少pageNumber这个参数，这样后台没办法判断前端需要哪一页的数据。

    ```
$('#category').bPage({
           url : "{:url('category/lst')}",
           asyncLoad : true,
           render : function(data){  //数据自定义填充
               var tb = $('#dataGridTableJson tbody');
               $(tb).empty();
               if(data && data.list && data.list.length > 0){
                   $.each(data.list,function(i,row){
                       var tr = $('<tr>');
                       $(tr).append('<td></td>');
                       $(tr).append('<td>'+row.name+'</td>');
                       $(tr).append('<td>'+row.sort+'</td>');
                       $(tr).append('<td>'+row.is_show+'</td>');
                       $(tb).append(tr);
                   });
               }
           },
           params : function(){
               return {
                   userName : 'zhangsan',
                   age : 42
               };
           }
       });
$('#category').bPageRefresh();  //这些我想刷新表格状态

```
    回复
    咚 0
    2018/6/13 10:48:13
    我也是页面都渲染出来了，就是分页不行，我不知道这个分页的触发事件是在哪里，不然怎么往后台传分页信息。
        夹击妹抖0
        2018/10/11 16:18:51
        他这个封装好的，不用找触发事件，页码和每页数据量都在请求域里面，你前台不用传参数，后台直接打开请求域在请求域里面取就行。
    回复
    迁就 0
    2018/5/16 16:22:41
    请问我现在数据和排版都出来了，但是怎么实现分页效果
        Terry0
        2018/6/29 20:43:34
        官网有实例的 Demo 看一下就会了，很简单
    回复
    ?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数据吗

        Terry1
        2018/6/29 20:42:48
        $('#your page bar').bPageRefresh();
    回复
    ＲＥＳＴ 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字符串中对应的分页栏参数，生成分页栏，后台分页功能处理的代码已完成。

    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复