JavaScript实现翻页功能（附效果图）效果图：
要点：
displayPage('#pageDiv','goPage','query',10,1,100);
#pageDiv是显⽰翻页的div名称。
goPage是跳转到后⾯的⽂本输⼊框的id，如果有需要可以根据 * 这个参数直接赋值。
query是查询的⽅法名称。
10是总页数
1是当前页数
100是总条数。
<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%String path = ContextPath();%>
<%String basePath = Scheme()+"://"+ServerName()+":"+ServerPort()+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);
}
</script>
<body>
<button onclick="query()">查询</button>
<div>
⽤js实现的⼀个翻页。<br/>
使⽤场景：table中的数据通过ajax查询，查询完毕之后调⽤js⽣成翻页控件。<br/>
<pre>
displayPage('#pageDiv','goPage','query',10,1,100);
</pre>
</div>
<br/>
<div id="pageDiv"></div>
</body>
page.js
/**
* divObj：显⽰翻页的div，默认body。如：#pageDiv
* inputId：跳转页⾯的id，默认goPage。如：goPage
* js：点击过之后执⾏js的⽅法名。默认query。如：query
* records：总页数，默认1。
* total：总记录数，默认0。
* page：当前页，默认1。
javascript void 0 是什么意思*/
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>&ensp；页";
str += "&ensp；共 <span name='total'>"+records+"</span>&ensp；页";
str += " <a href='javascript:void(0)' onclick='"+js+"(1)'>⾸页</a>";
if(page>1){
str += " <a href='javascript:void(0)' onclick='"+js+"("+(page-1)+")'>上⼀页</a>";
}else{
str += " <a>上⼀页</a>";
}
if(page<records){
str += " <a href='javascript:void(0)' onclick='"+js+"("+(page+1)+")'>下⼀页</a>";
}else{
str += " <a>下⼀页</a>";
}
str += " <a href='javascript:void(0)' onclick='"+js+"("+records+")'>尾页</a>";
str += "&ensp；跳转到 <input type='number' min=1 max="+records+" id='"+inputId+"' value="+page+" style='width:40px'/>";
str += " <input type='button' value='go' onclick='var num=$(\"#"+inputId+"\").val();"+js+"(num)'/>";
$(divObj).empty();
$(divObj).append(str);
}
以上所述是⼩编给⼤家介绍的JavaScript实现翻页功能(附效果图)，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。