jQuery分页插件 bPage(原创)

所属分类:导航-分页

 12202  43  查看评论 (28)
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
        };
    }
});
相关插件-分页

实用的分页插件zxf_page.js

基于jquery的分页插件
  分页
 12058  68

基于Vue的分页插件pagination.js

基于jQuery的分页插件大家都用过很多了吧,今天分享一下基于Vue的分页插件pagination.js
  分页
 18156  29

简单的jQuery分页插件

简单粗暴的jQuery分页,代码少兼容好。
  分页
 24563  72
  分页
 18901  49

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

    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还不会用,回答不了你这个问题

    回复
    冉冉の爸比№ 0
    2017/8/3 13:21:48

    下面的部分是什么意思呢?

    return {
        userName: 'zhangsan',
        age: 42
    };
        Terry0
        2017/8/3 16:36:14

        这是用于请求 页面/ajax 时向服务端请求的业务参数,之所以使用function的方式,是允许在每次分页前可以执行一部分页面的计算或逻辑的操作,以不同的参数向后端发起请求

    回复
    L 0
    2017/7/26 17:48:29

    avascript初始化插件代码

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

    这个代码应该写在哪里?

        Terry0
        2017/7/26 17:57:51

        编辑器有代码模式,麻烦把排版弄好下,这样乱成一团看不来

        L0
        2017/7/26 18:02:10
        <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>
        <c:if test="${userList != null}">

        这个是哪里出来的,我有点没懂,希望解释下 谢谢你,1

        Terry1
        2017/7/26 20:36:19

        这一段代码是在JSP上的EL表达式,简单的说是将服务端的变量输出到页面

        例如在Java的Controller中向页面输出了一个userList的对象,这个对象里就有上述代码中的pageNumber等属性,那么将这些分页信息输出到页面上后,就可以使用javascript、jQuery来获得隐藏域中的内容来初始化插件的分页信息

        L0
        2017/7/27 9:43:13

        为啥我啥也出不来。。。能教教不。

        Terry0
        2017/7/27 9:53:50

        你还是学生?

        L0
        2017/7/27 9:57:21

        啊,实习生。

        Terry0
        2017/7/27 10:56:54

        看来你非常缺乏基础知识,这个分页插件主要用于数据服务端数据交互并使用服务端分页数据进行构建分页栏

        那么你需要了解什么是服务端,了解将服务端内容输出到页面是怎么回事,javascript、jquery插件是怎么回事

        L0
        2017/7/27 11:32:27

        内容我已经输出到页面了。。。就是想做个分页 。。感觉你这个很好用,想试试,就是怎么都出不来。我也按照你的API做了。没反应,是Bootstrap环境的不一样还是什么原因?

        Terry0
        2017/7/27 13:15:49

        也许你漏写了一个专门用于生成分页栏的DIV

        <!-- 分页栏 -->
        <div id="page1"></div>

        具体的案例参考:

        https://terryz.github.io/bpage/demo.html

        L0
        2017/7/27 14:00:16

        我写了的。没有显示。样式出来了我就好弄点了。主要是样式都不来 痛苦,,

        <c:forEach items="${li3}" var="a">
             
        	     <tr>
                    <td>${a.ID }</td>
                    <td>${a.ORG_NO }</td>
                    <td>${a.OPR_NO }</td>
                    <td>K9</td>
                    <td>${a.CONS_ADDR }</td>
                     <td>${a.RTIME }</td>
                    <td>${a.PURP_AMT }</td>
                    <td>${a.PURP_VALUE }</td>
                    <td>${a.CONS_NAME }</td>
                    <td>${a.CONS_NO }</td>
                    <td>${a.CARD_NO }</td>
                    <td>
                    <c:choose>
            	<c:when test="${a.WRITE_FLAG==0}">   
        
                 <font color=#66CD00>成功</font>
            	</c:when>
           
           		<c:otherwise>  
        			 <font color=#FF0000>失败</font>	
           		</c:otherwise>
          
        	</c:choose>
        				</td>
                    
                </tr>
                </c:forEach>
                </table>
                <c:if test="${list3 != null}">
        			<input type="hidden" id="pageNumber" value="${list3.pageNumber}">
        			<input type="hidden" id="pageSize" value="${list3.pageSize}">
        			<input type="hidden" id="totalPage" value="${list3.totalPage}">
        			<input type="hidden" id="totalRow" value="${list3.totalRow}">
        		</c:if>
        <!-- 分页栏 -->
        <div id="page1"></div>
                
            </div>
        Terry0
        2017/7/27 14:12:02

        给你整理了下代码,不知道是不是你少了标签

        <div>
        <table>
        <c:forEach items="${li3}" var="a">     
        	<tr>
        		<td>${a.ID }</td>
        		<td>${a.ORG_NO }</td>
        		<td>${a.OPR_NO }</td>
        		<td>K9</td>
        		<td>${a.CONS_ADDR }</td>
        		<td>${a.RTIME }</td>
        		<td>${a.PURP_AMT }</td>
        		<td>${a.PURP_VALUE }</td>
        		<td>${a.CONS_NAME }</td>
        		<td>${a.CONS_NO }</td>
        		<td>${a.CARD_NO }</td>
        		<td>
        	<c:choose>
            	<c:when test="${a.WRITE_FLAG==0}">   
        			<font color=#66CD00>成功</font>
            	</c:when>   
           		<c:otherwise>  
        			<font color=#FF0000>失败</font>	
           		</c:otherwise>  
        	</c:choose>
        		</td>            
        	</tr>
        </c:forEach>
        </table>
        <c:if test="${list3 != null}">
        	<input type="hidden" id="pageNumber" value="${list3.pageNumber}">
        	<input type="hidden" id="pageSize" value="${list3.pageSize}">
        	<input type="hidden" id="totalPage" value="${list3.totalPage}">
        	<input type="hidden" id="totalRow" value="${list3.totalRow}">
        </c:if>
        <!-- 分页栏 -->
        <div id="page1"></div>        
        </div>

        你这里的${li3}和${list3}是同一个对象还是不同的对象,你要确定${list3}这个对象里有这四个属性,另外,上面这些代码设置完后,只是HTML的代码完成了,还需要使用插件的初始化代码:

        <script type="text/javascript">
        $(function(){
        	$('#page1').bPage({
        		//这个URL设置成你当前页面的URL
        		url : $webroot + 'demo/manage/page',
        		//分页数据设置
        		totalPage : $('#totalPage').val(),
        		totalRow : $('#totalRow').val(),
        		pageSize : $('#pageSize').val(),
        		pageNumber : $('#pageNumber').val()
        	});
        });
        </script>
        L0
        2017/7/27 14:17:54
        不好意思,打错了。${li3}是同一个对象,但这个对象里面的属性我没有,应该在哪里设置。就是不明白这点。插件的初始化代码我也写了。但页面还是没有任何反应。
        Terry0
        2017/7/27 14:29:03
        你这个li3的对象,在Java后端应该是一个List对象,那么你们本身后端查询必须要有分页查询的功能方法,在查询后,是可以获得到这些分页相关的基础数据pageNumber为当前页,pageSize是每页显示记录数,totalRow是总行数,totalPage总页数这些数据在Java后端可以使用另外一个JavaBean来设置,并输出到页面上小伙子,建议你找你们公司的老员工指点一下,可以省去你折腾的时间,另外你太缺乏基础,在这里我甚至还要教你怎么写前端后端,咱样效率高点,找你们同事好好指点下再说
        L0
        2017/7/27 14:32:51
        大神 感谢。整出来了点了。 我在慢慢玩会。老司机太忙。我自己研究 谢谢你。
    回复
    好奇心害死猫(~_~;) 0
    2017/7/24 18:00:32

    请问作者大大,我为什么获取不到  当前页  和 每页条数呢

        Terry0
        2017/7/24 18:56:23

        你用的哪个模式,是在什么时候需要获得分页数据?

    回复
取消回复