JS如何控制分页

JavaScript047

JS如何控制分页,第1张

//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文件,注意必须先放jquery的

[javascript] view plaincopy

<script src="css/infinite-scroll/jquery-1.6.4.js"></script>

<script src="css/infinite-scroll/jquery.infinitescroll.js"></script>

2.之后在网页头自己写一个js脚本

[javascript] view plaincopy

<script>

$(document).ready(function (){

$("#container").infinitescroll({

navSelector: "#navigation", //页面分页元素--本页的导航,意思就是一个可以触发ajax函数的模块

nextSelector: "#navigation a", //下一页的导航

itemSelector: ".scroll " , //此处我用了类选择器,选择的是你要加载的那一个块(每次载入的数据放的地方)

animate: true, //加载时候时候需要动画,默认是false

maxPage: 3,//最大的页数,也就是滚动多少次停。这个页码必须得要你从数据库里面拿

})

})

</script>

3.或许你看到这里还是不太清楚网页怎么定义,这里给出我的demo,希望可以有帮助

[html] view plaincopy

<%@ page language="java" contentType="text/htmlcharset=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>

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) {

// TODO 自动生成 catch 块

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) {

// TODO 自动生成 catch 块

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.*" %>

<%