js实现的分页代码（js前端分页）
更新：2022-11-11 17:14
本文目录一览：
- 怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢
- 如何用JS将数据在页面上分页显示出来
- JS如何控制分页
- 求JS分页实例或者servlet分页实例，最好有例子能直接运行看看效果
- javascript如何实现div分页呢？
- [求JS代码，分页【上一页 1 2 3 4 5 下一页】](#求JS代码，分页【上一页 1 2 3 4 5 下一页】)
怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢
分屏加载吧 滑到哪加载哪 从网页头引入两个js文件，注意必须先放jquery的
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
之后在网页头自己写一个js脚本
<script>
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll", //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
</script>
或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无限翻页效果</title>
<script src="css/infinite-scroll/jquery-1.6.4.js"></script>
<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>
<script src="css/infinite-scroll/test/debug.js"></script>
<script>
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll",
animate: true,
maxPage: 3,
});
});
</script>
</head>
<body>
<div id="container"> <!-- 容器 -->
<div class="scroll"> <!-- 每次要加载数据的数据块 -->
第一页内容第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容<br>
第一页内容<br>第一页内容<br>第一页内容
</div>
</div>
<div id="navigation" align="center"> <!-- 页面导航 -->
<a href="user/list?page=1"></a> <!-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。 -->
</div>
</body>
</html>
如何用JS将数据在页面上分页显示出来
在servlet的service()方法中只需进行如下操作：
PageControl pageCtl = yourBusinessObject.listData(req.getParameter("jumpPage"));
req.setAttribute("pageCtl", pageCtl);
说明：yourBusinessObject封装了商业逻辑，是位于Business Logic Layer中的一个对象，运用OOAD的方法，封装商业对象，在Persistent Layer之上组建坚实的Business Logic Layer同样是构建大型电子商务架构的关键所在。本文的关注点只是分页处理，暂不详细论述。 在每个想要实现翻页显示数据的jsp页面中，我们的工作也很简单,其代码是公式化的：
<jsp:useBean id="pageCtl" class="yourpackage.PageControl" scope="request"/>
<% if(pageCtl.maxPage != 1) { %>
<form name="PageForm" action="/servlet/yourpackage.yourservlet" method="post">
<%@ include file="/yourpath/pageman.jsp" %>
</form>
<% } %>
说明：
if(pageCtl.maxPage != 1)实现了这样一个逻辑：如果所取得数据不足一页,那么就不用进行翻页显示。
我们注意到<%@ include file="/yourpath/pageman.jsp" %>这使得真正的翻页部分完全得到了重用。
那么pageman.jsp到底做了些什么呢？它实现了经常做翻页处理的人耳熟能详的逻辑：
- （A）第一页时不能再向前翻；
- （B）最后一页时不能再向后翻； 同时能够进行页面任意跳转，具体代码如下：
每页<%=pageCtl.rowsPerPage%>行
共<%=pageCtl.maxRowCount%>行
第<%=pageCtl.curPage%>页
共<%=pageCtl.maxPage%>页
<br>
<% if(pageCtl.curPage == 1) { %>
首页上一页
<% } else { %>
<a href="javascript:gotoPage(1)">首页</a>
<a href="javascript:gotoPage(<%=pageCtl.curPage - 1%>)">上一页</a>
<% } %>
<% if(pageCtl.curPage == pageCtl.maxPage) { %>
下一页尾页
<% } else { %>
<a href="javascript:gotoPage(<%=pageCtl.curPage + 1%>)">下一页</a>
<a href="javascript:gotoPage(<%=pageCtl.maxPage%>)">尾页</a>
<% } %>
转到第<select name="jumpPage" onchange="Jumping()">
<% for(int i = 1; i <= pageCtl.maxPage; i++) { %>
<% if(i == pageCtl.curPage) { %>
<option selected value=<%=i%>><%=i%></option>
<% } else { %>
<option value=<%=i%>><%=i%></option>
<% } %>
<% } %>
</select>页
最后附上用于页面跳转的javascript公共函数:
function Jumping() {
document.PageForm.submit();
return;
}
function gotoPage(pagenum) {
document.PageForm.jumpPage.value = pagenum;
document.PageForm.submit();
return;
}
运行效果：
JS如何控制分页
//js获取url上的参数
function getParam(name) {
var reg = new RegExp("(^|)" + name + "=([^]*)(|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var page = getParam('page');
求JS分页实例或者servlet分页实例，最好有例子能直接运行看看效果
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页JS代码</title>
<style type="text/css">
.page {
margin: 2em;
}
.page a {
text-decoration: none;
display: inline-block;
line-height: 14px;
padding: 2px 5px;
color: #333;
border: 1px solid #ccc;
margin: 0 2px;
}
.page a:hover,
.page a.on {
background: #999;
color: #fff;
border: 1px solid #333;
}
.page a.unclick,
.page a.unclick:hover {
background: none;
border: 1px solid #eee;
color: #999;
cursor: default;
}
</style>
</head>
<body>
<div class="page"></div>
<div class="page"></div>
<script type="text/javascript">
//container 容器，count 总页数 pageindex 当前页数
function setPage(container, count, pageindex) {
var container = container;
var count = count;
var pageindex = pageindex;
var a = [];
//总页数少于10 全部显示,大于10 显示前3 后3 中间3 其余....
if (pageindex == 1) {
a[a.length] = "<a href=\"#\" class=\"prev unclick\">prev</a>";
} else {
a[a.length] = "<a href=\"#\" class=\"prev\">prev</a>";
}
function setPageList() {
if (pageindex == i) {
a[a.length] = "<a href=\"#\" class=\"on\">" + i + "</a>";
} else {
a[a.length] = "<a href=\"#\">" + i + "</a>";
}
}
//总页数小于10
if (count <= 10) {
for (var i = 1; i <= count; i++) {
setPageList();
}
}
//总页数大于10页
else {
if (pageindex <= 4) {
for (var i = 1; i <= 5; i++) {
setPageList();
}
a[a.length] = "...<a href=\"#\">" + count + "</a>";
} else if (pageindex >= count - 3) {
a[a.length] = "<a href=\"#\">1</a>...";
for (var i = count - 4; i <= count; i++) {
setPageList();
}
} else { //当前页在中间部分
a[a.length] = "<a href=\"#\">1</a>...";
for (var i = pageindex - 2; i <= pageindex + 2; i++) {
setPageList();
}
a[a.length] = "...<a href=\"#\">" + count + "</a>";
}
}
if (pageindex == count) {
a[a.length] = "<a href=\"#\" class=\"next unclick\">next</a>";
} else {
a[a.length] = "<a href=\"#\" class=\"next\">next</a>";
}
container.innerHTML = a.join("");
//事件点击
var pageClick = function () {
var oAlink = container.getElementsByTagName("a");
var inx = pageindex; //初始的页码
oAlink[0].onclick = function () { //点击上一页
if (inx == 1) {
return false;
}
inx--;
setPage(container, count, inx);
return false;
}
for (var i = 1; i < oAlink.length - 1; i++) { //点击页码
oAlink[i].onclick = function () {
inx = parseInt(this.innerHTML);
setPage(container, count, inx);
return false;
}
}
oAlink[oAlink.length - 1].onclick = function () { //点击下一页
if (inx == count) {
return false;
}
inx++;
setPage(container, count, inx);
return false;
}
}();
}
setPage(document.getElementsByTagName("div")[0], 10, 1);
setPage(document.getElementsByTagName("div")[1], 13, 5);
</script>
</body>
</html>
javascript如何实现div分页呢？
主要思路：就是点击当前页时，它自己显示，其它的都隐藏； 下面是简单的代码实现：
<style>
input.active {
background: yellow;
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
display: none;
}
div.active {
display: block;
}
</style>
<script>
window.onload = function () {
var aBtn = document.getElementsByTagName('input');
var aDiv = document.getElementsByTagName('div');
for (var i = 0; i < aBtn.length; i++) {
(function (index) { //因为要存储点击的下标，所以需要做一个参数引入。学名叫'自执行匿名函数'。
aBtn[i].onclick = function () {
//这个for循环的作用是将所以的都隐藏。
for (var i = 0; i < aBtn.length; i++) {
aBtn[i].className = '';
aDiv[i].className = '';
}
//这是将当前点击的显示。
this.className = 'active';
aDiv[index].className = 'active';
};
})(i);
}
};
</script>
<body>
<input type="button" value="111" class='active' />
<input type="button" value="222" />
<input type="button" value="333" />
<div class="active">11111111111</div>
<div>22222222222</div>
<div>33333333333</div>
</body>
求JS代码，分页【上一页 1 2 3 4 5 下一页】
create proc proc_insertstu
@sid int,@sname varchar(20),@ssex varchar(6),@sage int
as
insert into stu values(@sid,@sname,@ssex,@sage)
go
Java调用:
public boolean insertStu(Student stu) {
CallableStatement call = null;
try {
call = con.prepareCall("{call proc_insertstu(?,?,?,?)}");
} catch (SQLException e) {
e.printStackTrace();
return false;
}
try {
call.setInt(1, stu.getId());
call.setString(2, stu.getName());
call.setString(3, stu.getName());
call.setInt(4, stu.getAge());
call.execute();
} catch (SQLException e) {
e.printStackTrace();
return false;
}
return true;
}
JSP调用：
<%
DBCon db = new DBCon();
db.getCon();
CallableStatement call = db.con.prepareCall("{call proctest}");
call.execute();
ResultSet rs = call.getResultSet();
%>
<%@ page contentType="text/html; charset=gb2312"%>
<%@ page language="java" import="java.sql.*" %>
