纯js分页代码（原生js分页）

本篇文章给大家谈谈纯js分页代码，以及原生js分页对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、求JS代码，分页【上一页 1 2 3 4 5 下一页】
• 2、修改一段js分页代码
• 3、网页设计中页面默认为第二页,如何用js实现点击上一页跳转到第一页,点击下一页跳转
• 4、网页上的“上一页，下一页”JS代码怎么写？

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

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

%

修改一段js分页代码

给你做个参考：

****************************

注意：

请将里面中文的引号“替换成英文格式的，不知为何体统自动过滤掉了，所以我改成了中文，你自己改一下

****************************

html

head

meta http-equiv='Content-Type' content='text/html; charset=gb2312'

title表格分页显示_caiying2009/title

/head

body

table border='1' cellpadding='0' cellspacing='0'

tbodytr

td width='73' 序号/td

td width='223' 标题/td

td width='50' 作者/td

td width='100' 发表时间/td/tr/tbody/table

table border='1' cellpadding='0' cellspacing='0' id=tab1

tbody

tr id='mytr0'

td width='73'00/td

td width='223' align='left'img src='img/log.jpg'/a href='###'00/a/td

td width='50'00/td

td width='100'00/td/tr

tr id='mytr1'

td width='73'11/td

td width='223' align='left'img src='img/log.jpg'/a href='###'11/a/td

td width='50'11/td

td width='100'11/td/tr

tr id='mytr2'

td width='73'22/td

td width='223' align='left'img src='img/log.jpg'/a href='###'22/a/td

td width='50'22/td

td width='100'22/td/tr

tr id='mytr3'

td width='73'33/td

td width='223' align='left'img src='img/log.jpg'/a href='###'33/a/td

td width='50'33/td

td width='100'33/td/tr

tr id='mytr4'

td width='73'44/td

td width='223' align='left'img src='img/log.jpg'/a href='###'44/a/td

td width='50'44/td

td width='100'44/td/tr

tr id='mytr5'

td width='73'55/td

td width='223' align='left'img src='img/log.jpg'/a href='###'55/a/td

td width='50'55/td

td width='100'55/td/tr

tr id='mytr6'

td width='73'66/td

td width='223' align='left'img src='img/log.jpg'/a href='###'66/a/td

td width='50'66/td

td width='100'66/td/tr

tr id='mytr7'

td width='73'77/td

td width='223' align='left'img src='img/log.jpg'/a href='###'77/a/td

td width='50'77/td

td width='100'77/td/tr

tr id='mytr8'

td width='73'88/td

td width='223' align='left'img src='img/log.jpg'/a href='###'88/a/td

td width='50'88/td

td width='100'88/td/tr

tr id='mytr9'

td width='73'99/td

td width='223' align='left'img src='img/log.jpg'/a href='###'99/a/td

td width='50'99/td

td width='100'99/td/tr

/tbody/table

br

div id='changpage'/div

script language='javascript'

!--

var obj,j;

var page=0;

var nowPage=0;//当前页

var listNum=4;//每页显示数

var PagesLen;//总页数

var PageNum=5;//分页链接数

onload=function(){

obj=document.getElementById(“tab1“).getElementsByTagName(“tr“);

j=obj.length;

PagesLen=Math.ceil(j/listNum);

upPage(0);

}

function upPage(p){

nowPage=p;

//内容变换

for (var i=0;ij;i++){

obj[i].style.display=“none“;

}

for (var i=p*listNum;i(p+1)*listNum;i++){

if(obj[i])obj[i].style.display=“block“;

}

//分页链接变换

strS='a href=“###“ onclick=“upPage(0)“首页/a ';

var PageNum_2=PageNum%2==0?Math.ceil(PageNum/2)+1:Math.ceil(PageNum/2);

var PageNum_3=PageNum%2==0?Math.ceil(PageNum/2):Math.ceil(PageNum/2)+1;

var strC=““,startPage,endPage;

if (PageNum=PagesLen) {startPage=0;endPage=PagesLen-1;}

else if (nowPagePageNum_2){startPage=0;endPage=PagesLen-1PageNum?PageNum:PagesLen-1;}//首页

else {startPage=nowPage+PageNum_3=PagesLen?PagesLen-PageNum-1: nowPage-PageNum_2+1;var t=startPage+PageNum;endPage=tPagesLen?PagesLen-1:t;}

for (var i=startPage;i=endPage;i++){

if (i==nowPage)strC+='a href=“###“ style=“color:red;font-weight:700;“ onclick=“upPage('+i+')“'+(i+1)+'/a ';

else strC+='a href=“###“ onclick=“upPage('+i+')“'+(i+1)+'/a ';

}

strE=' a href=“###“ onclick=“upPage('+(PagesLen-1)+')“尾页/a ';

strE2=nowPage+1+“/“+PagesLen+“页“+“ 共“+j+“条“;

document.getElementById(“changpage“).innerHTML=strS+strC+strE+strE2;

}

/script

/body

/html

网页设计中页面默认为第二页,如何用js实现点击上一页跳转到第一页,点击下一页跳转

纯js实现分页方法一：

废话不多说，直接上代码了！

注：本项目是全程使用js来写的，前台的数据通过ajax进行获取，然后再进行拼装，动态加载到页面。

1.先把上一页，下一页等的代码附上(里面的值都是伪值，下面会在js里进行重新赋值的！)

ul class="page" id="page"

li id="shouye" class="p-prev disabled"

a href='javascript:indexpage(1);'首 页/a

/li

li id="shangyiye" class="p-prev disabled"

a href='javascript:indexpage(-1);'i/i上一页/a

/li

li a id="one" href="javascript:void(0);" 1/a/li

lia id="two" href="javascript:void(0);" 2/a/li

lia id="three" href="javascript:void(0);" 3/a/li

li class="more"a id="five" href="javascript:void(0);" .../a/li

lia id="fore" href="javascript:void(0);" 13855/a/li

li class='p-next'

a href='javascript:indexpage(-3);' onclick="jumpToPage('2','/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);"下一页i/i/a

/li

li id="weiye" class='p-next'

a href='javascript:void(0);' onclick="indexpage(0);"尾 页/a

/li

li class="total"

span id="span_number"共13855页 到第input type="text" id="input_number" class="page-txtbox" /页

input name="" value="确定" type="button" onclick="jumpToPage(jQuery('#input_number').val(),'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','13855', listPageCallback);" class="page-btn"/

/span

/li

/ul

2.首先在页面放两个隐藏域，一个是当前页码，一个是总页码，总页码是页面加载完，从后台查询出来后直接附上值的，当前页码是没操作一个，就要对当前页码赋值

input id="jiazai" type="hidden" /input!-- 当前页码 --

input id="totalpage" type="hidden" /input!-- 总页码 --

3.写一个页面加载完的function，给总页码和当前页码赋值

$(function(){

$('#jiazai').val(1);//给当前页码进行赋值，默认为第一页

ajaxfunction(page,arg,chipssort,'');//这个方法是抽取的ajax后台访问的方法

});

4.抽取的ajax方法，此页面会用到好几次这个方法，所有把它收取了出来，因为页面的数据时通过ajax从后台获取到的，后台返回的是一个List集合

//抽取ajax的方法

function ajaxfunction(page,arg,chipssort,fontval){

$.ajax({

type:'POST',

url:'/admin/receptionchips/showlist',//请求的url地址

data:{

page:page,

sort:arg,

chipssort:chipssort,

fontval:fontval

},

dataType:'json',

contentType:'application/x-www-form-urlencoded; charset=utf-8',

success:function(data){

//返回值在进行访问抽取的方法，从后台返回

commonfunction(data);

}

});

}

5.代码看到这也不是很多，最后一个了

//抽取拼串的方法

function commonfunction(data){

$('#projectlist').find("li").remove();

for (var i=0;idata.length;i++ )

{

/*****因为此页面是动态加载的，这里主要就是进行拼串，代码也不少，就不漏出来占空间了*****/br

}br//开始是分页的核心了

if(data.length0){

//设置页码

var pading = data[0].padingnum;//总页码

$('#totalpage').val(pading);

var page = $('#jiazai').val();//当前页

$('#countpage').html("b id='currentPageNo'"+page+"/b/"+pading+"");

$('#span_number').html("共"+pading+"页 到第input type='text' id='input_number' class='page-txtbox' /页input name='' value='确定' type='button' onclick='indexpage(-2)'/goods/ajaxqueryGoodsList.do.html','','goodsListContainer','"+pading+"', listPageCallback);' class='page-btn'/")

}else{

$('#countpage').html("b id='currentPageNo'"+0+"/b/"+0+"");

}

//设置分页的底部 就是 首页 1 2 3 4 5 6 尾页

var pading = data[0].padingnum;//总页码href="javascript:void(0);"

var nowpage = $('#jiazai').val();//当前页

//one two three five forebr//下面代码看着是比较麻烦，但是也不难理解 全是一样的代码，只不过是加了些判断

if(nowpage5 ){

$('#one').text(1);

$('#one').attr('href','javascript:pagenum("'+1+'");');

$('#two').text(2);

$('#two').attr('href','javascript:pagenum("'+(2)+'");');

$('#three').text(3);

$('#three').attr('href','javascript:pagenum("'+(3)+'");');

$('#five').text(4);

$('#five').attr('href','javascript:pagenum("'+(4)+'");');

$('#fore').text(5);

$('#fore').attr('href','javascript:pagenum("'+(5)+'");');

$('#five').parent().show();

$('#fore').parent().show();

}else{

//alert("已经不是第五页了");

//设置中间的为当前页

$('#one').text(Number(nowpage)-2);

$('#one').attr('href','javascript:indexpage("'+(Number(nowpage)-2)+'");');

$('#two').text(Number(nowpage)-1);

$('#two').attr('href','javascript:indexpage("'+(Number(nowpage)-1)+'");');

$('#three').text(nowpage);

$('#three').attr('href','javascript:indexpage("'+(nowpage)+'");');

$('#five').parent().show();

$('#fore').parent().show();

//判断下一页是否超过了总页数

if(Number(nowpage)+1pading){

$('#five').parent().hide();

$('#fore').parent().hide();

}else{

$('#five').parent().show();

$('#five').text(Number(nowpage)+1);

$('#five').attr('href','javascript:indexpage("'+(Number(nowpage)+1)+'");');

}

//判断下一页的第二页是否超过了总页数

if(Number(nowpage)+2pading){

$('#fore').parent().hide();

}else{

$('#fore').parent().show();

$('#fore').text(Number(nowpage)+2);

$('#fore').attr('href','javascript:indexpage("'+(Number(nowpage)+2)+'");');

}

}

//如果总页数小于5，这块代码主要就是设置 1 2 3 4 5 这些的显示和隐藏的

if(pading==0){

$('#one').parent().hide();

$('#two').parent().hide();

$('#three').parent().hide();

$('#five').parent().hide();

$('#fore').parent().hide();

}else if(pading==1){

$('#shouye').hide();

$('#weiye').hide();

$('#one').parent().hide();

$('#two').parent().hide();

$('#three').parent().hide();

$('#five').parent().hide();

$('#fore').parent().hide();

}else if(pading==2){

$('#one').parent().show();

$('#two').parent().show();

$('#three').parent().hide();

$('#five').parent().hide();

$('#fore').parent().hide();

}else if(pading==3){

$('#one').parent().show();

$('#two').parent().show();

$('#three').parent().show();

$('#five').parent().hide();

$('#fore').parent().hide();

}else if(pading==4){

$('#one').parent().show();

$('#two').parent().show();

$('#three').parent().show();

$('#five').parent().show();

$('#fore').parent().hide();

}else{

$('#one').parent().show();

$('#two').parent().show();

$('#three').parent().show();

$('#five').parent().show();

$('#fore').parent().show();

}

//设置高亮显示的，就是是第一页时，1亮，第二页时 2亮

$('#page a').each(function() {

$(this).parent().removeClass("current");

if($(this).text()==nowpage){

$(this).parent().addClass("current");

}

});

//分页完返回页面顶端

$("html,body").animate({scrollTop:0}, 500);

//最后，给当前页码加1

$('#jiazai').val(Number(bianlaing)+Number(1));

}

纯js实现分页方法二：

function goPage(pno,psize){

var itable = document.getElementById("idData");

var num = itable.rows.length;//表格行数

var totalPage = 0;//总页数

var pageSize = psize;//每页显示行数

if((num-1)/pageSize parseInt((num-1)/pageSize)){

totalPage=parseInt((num-1)/pageSize)+1;

}else{

totalPage=parseInt((num-1)/pageSize);

}

var currentPage = pno;//当前页数

var startRow = (currentPage - 1) * pageSize+1;//开始显示的行

var endRow = currentPage * pageSize+1;//结束显示的行

endRow = (endRow num)? num : endRow;

//前三行始终显示

for(i=0;i1;i++){

var irow = itable.rows[i];

irow.style.display = "block";

}

for(var i=1;inum;i++){

var irow = itable.rows[i];

if(i=startRowiendRow){

irow.style.display = "block";

}else{

irow.style.display = "none";

}

}

var pageEnd = document.getElementById("pageEnd");

var tempStr = "";

if(currentPage1){

tempStr += "a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage-1)+","+psize+")/"img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' //a "

}else{

tempStr += "a href="/" mce_href="/""#/" onmouseout='MM_swapImgRestore()' onmouseover=/"MM_swapImage('Image69','','images/back_buttom01_dowm.jpg',1)/"img src="/" mce_src="/""images/back_buttom01.jpg/" name='Image69' width='38' height='15' border='0' id='Image69' //a ";

}

for (var i = 1; i = totalPage; i++) {

if (i == currentPage) {

tempStr += i+" ";

} else {

tempStr += "a href="/" mce_href="/""#/" onClick=/"goPage("+(i)+","+psize+")/""+i+"/a "

}

}

if(currentPagetotalPage){

tempStr += "a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/" onClick=/"goPage("+(currentPage+1)+","+psize+")/"img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' //a ";

}else{

tempStr += "a href="/" mce_href="/""#/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image68','','images/next_buttom01_dowm.jpg',1)/"img src="/" mce_src="/""images/next_buttom01.jpg/" name='Image68' width='38' height='15' border='0' id='Image68' //a ";

}

tempStr +="a href="/" mce_href="/""#top/" onmouseout=/"MM_swapImgRestore()/" onmouseover=/"MM_swapImage('Image20','','images/top_buttom01_dowm.jpg',1)/"img src="/" mce_src="/""images/top_buttom01.jpg/" name='Image20' width='38' height='15' border='0' id='Image20' //a";

document.getElementById("barcon").innerHTML = tempStr;

}

var base='%=base%';

window.onload = function(){

goPage(1,10);

}

div id="barcon" name="barcon"/div

温馨提示：js代码中上一页 下一页定义的图片根据自己需求可以改的

网页上的“上一页，下一页”JS代码怎么写？

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的script标签，输入js代码：

var a = parseInt(location.href.split('?')[1].split('=')[1]);

$('body').append('a href="index?page=' + (a - 1) + '"上一页/a');

$('body').append('a href="index?page=' + (a + 1) + '"下一页/a');

3、浏览器运行index.html?page=5页面，此时js会生成出上一页和下一页及其链接。

关于纯js分页代码和原生js分页的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。