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

jQuery分页插件 bPage(原创)

所属分类：导航-分页

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

jQuery仿淘宝分页插件(原创)

 根据淘宝分页样式简洁美观功能全面兼容性好易用性好维护简单多个分页互不干扰的分页插件
  分页
 37373  352

jQuery翻页插件simplePagination

 jQuery翻页插件simplePagination
  分页
 55549  362

jquery分页插件

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

jQuery table分页插件

 一款简单快速的前后端分页双套代码
  分页
 69468  466

讨论这个项目（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字符串中对应的分页栏参数，生成分页栏，后台分页功能处理的代码已完成。

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