评论：jQuery分页插件 bPage(原创)  [查看原文]

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
大神 感谢。整出来了点了。 我在慢慢玩会。老司机太忙。我自己研究 谢谢你。

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

Terry0
2017/7/24 18:56:23

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