JavaScript实现翻页功能(附效果图)

JavaScript实现翻页功能实现翻页功能(附效果图附效果图)

主要介绍了JavaScript实现翻页功能(附效果图)，在项目需求中经常遇到，今天小编抽时间给大家分享

JavaScript实现翻页功能实例代码，需要的朋友参考下吧

效果图：

要点：

displayPage('#pageDiv','goPage','query',10,1,100);

#pageDiv是显示翻页的div名称。

goPage是跳转到后面的文本输入框的id，如果有需要可以根据 * 这个参数直接赋值。

<%String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>

<script src="/easyui/jquery-easyui-1.4.3/jquery.min.js"></script>

<script src="page.js"></script>

<script>

function query(queryPage){

//ajax查询表格需要的数据

var queryPage = queryPage||1;

console.log("query page=" + queryPage);

//重新生成pageDiv

displayPage('#pageDiv','goPage','query',10,1,100);

使用场景：table中的数据通过ajax查询，查询完毕之后调用js生成翻页控件。<br/>

<pre>

displayPage('#pageDiv','goPage','query',10,1,100);

</pre>

</div>

<br/>

<div id="pageDiv"></div>

</body>

page.js

/**

*/

function displayPage(divObj,inputId,js,records,page,total){

//设置默认值

divObj = divObj||"body";

inputId = inputId||"goPage";

js=js||"query";

records=records||1;

total=total||0;

page=page||1;

var str = "当前第 <span name='page'>"+page+"</span> 页";

}

if(page<records){

str += " <a href='javascript:void(0)' onclick='"+js+"("+(page+1)+")'>下一页</a>";

}else{

str += " <a>下一页</a>";

}