js实现分页

最新推荐文章于 2022-09-01 10:25:14 发布
最新推荐文章于 2022-09-01 10:25:14 发布
阅读量236 收藏
点赞数
分类专栏： web 文章标签： js 分页 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenzheng8975/article/details/84480731
版权

sysdeptlist.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'sysdeptlist.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<script type="text/javascript" src="<%=basePath%>/js/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="<%=basePath%>/js/page.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
		sysDeptList(); 
    }); 
    function sysDeptList(){
    	var currentPage=page.currentPage;
	var pageSize=page.pageSize;
        $.ajax({               
            type: "POST",               
            dataType: "json",               
            url: 'sysDeptListPage',
            data:  'currentPage='+currentPage+'&pageSize='+pageSize,    
            success: function(data) {   
                //var json=eval("("+data+")");
                var json=data["depylist"];
                var deptdata="";
                if(json["jsondata"].length==0){
                	deptdata+='<tr><td colspan="4">没有记录</td></tr>';
                }
                for(var i=0;i<json["jsondata"].length;i++){
                	deptdata+='<tr><td>'+json["jsondata"][i].jgid+'</td>'
							+'<td>'+json["jsondata"][i].jgmc+'</td>'
                			+'<td>'+json["jsondata"][i].fjgid+'</td>'
                			+'<td>'+json["jsondata"][i].jgbm+'</td></tr>';
                }
                $("#sysdeptlist").html(deptdata);
                paging1(json,sysDeptList);
                initTableStyle("sysdeptlist");
            }   
        });	
    }
    //初始化表格样式
    function initTableStyle(){
    	$(".table1 tr").hover(function(){ 
    	    $(this).children("td").addClass("hover") 
    	},function(){ 
    	    $(this).children("td").removeClass("hover") 
    	});
    	$(".table1 tbody tr:odd").css("background-color", "#bbf"); 
    	$(".table1 tbody tr:even").css("background-color","#ffc");  
    }
	</script>
	<style type="text/css">
       .hover
       {
           background-color:red;
       }
    </style>
  </head>
  
  <body>
    <table width="500px" border="1" class="table1">
    <th>jgid</th>
    <th>jgmc</th>
    <th>fjgid</th>
    <th>jgbm</th>
    <tbody id="sysdeptlist">
    </tbody>
    </table>
    <div id="id_pageDiv"></div>
  </body>
</html>

 

Page.java:

package com.cz.model;

import java.util.ArrayList;

import net.sf.json.JSONArray;

public class Page {
	private Long currentPage;
	private Long totalPage;
	private Long pageSize;
	private Long count;
	private JSONArray jsondata;
	public Long getCurrentPage() {
		return currentPage;
	}
	public void setCurrentPage(Long currentPage) {
		this.currentPage = currentPage;
	}
	public Long getTotalPage() {
		return totalPage;
	}
	public void setTotalPage(Long totalPage) {
		this.totalPage = totalPage;
	}
	public Long getPageSize() {
		return pageSize;
	}
	public void setPageSize(Long pageSize) {
		this.pageSize = pageSize;
	}
	public Long getCount() {
		return count;
	}
	public void setCount(Long count) {
		this.count = count;
	}
	public JSONArray getJsondata() {
		return jsondata;
	}
	public void setJsondata(JSONArray jsondata) {
		this.jsondata = jsondata;
	}
	
	
}

 

action方法:

/**
	 * @author chenzheng
	 * @since 2013-9-8
	 * @Description: 分页测试
	 * @throws
	 * @return
	 * String
	 */
	public String sysDeptListPage(){
		System.out.println("********sysDeptListPage*******");
		Long fromRow=(currentPage-1)*pageSize+1;
		Long toRow=currentPage*pageSize;
		String sql="select b.* from (select a.*,rownum rn from (select t.jgid,t.jgmc,t.fjgid,t.jgbm from SYS_DEPT t) a where rownum<="+toRow+") b where rn>="+fromRow;
		ResultSet rs=SqlHelper.executeQuery(sql, null);
		String csql="select count(*) from SYS_DEPT";
		ResultSet rs2=SqlHelper.executeQuery(csql,null);
		Long count=0l;
		Long totalPage=0l;
		try {
			while(rs2.next()){
				count=rs2.getLong(1);
				totalPage=count%pageSize>0?count/pageSize+1:count/pageSize;
			}
		} catch (SQLException e1) {
			e1.printStackTrace();
		}finally{
			SqlHelper.close(rs2, SqlHelper.getPs(), SqlHelper.getCt());
		}
		JSONArray jarray=new JSONArray();
		Page page=new Page();
		page.setCount(count);
		page.setCurrentPage(currentPage);
		page.setPageSize(pageSize);
		page.setTotalPage(totalPage);
		List<Sysdept> list=new ArrayList<Sysdept>();
		try {
			while(rs.next()){
				Sysdept dept=new Sysdept();
				dept.setJgid(rs.getString(1));
				dept.setJgmc(rs.getString(2));
				dept.setFjgid(rs.getString(3));
				dept.setJgbm(rs.getString(4));
				list.add(dept);
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			SqlHelper.close(rs, SqlHelper.getPs(), SqlHelper.getCt());
		}
		jarray.addAll(list);
		page.setJsondata(jarray);
		JSONObject jobj=new JSONObject();
		jobj.put("depylist", page);
		System.out.println(jobj.toString());
		HttpServletResponse response = ServletActionContext.getResponse();
		response.setCharacterEncoding("utf-8");
		PrintWriter pw = null;
		try {
			pw = response.getWriter();
			pw.write(jobj.toString());
		} catch (IOException e) {
			e.printStackTrace();
		}
		pw.flush();
		pw.close();
		return null;
	}

 

page.js:

//初始化分页变量
var page = {};
page.currentPage = 1;
page.pageSize = 4;
// 创建分页
function paging1(data, me) {
	// var projectpath=$("#projectpath").val();
	// 当前页
	var curpage = data.currentPage;
	// 总页数
	var totalpage = data.totalPage;
	// 每页显示条数
	var pagesize = data.pageSize;
	// 总记录数
	var count = data.count;
	page.count = count;
	page.pageSize = pagesize;
	// 创建tab
	var tab = document.createElement("TABLE");
	tab.style.cssText = "margin-left:30%;margin-top:10px;table-layout:fixed;";
	var tbody = document.createElement("TBODY");
	var tr = document.createElement("TR");
	// 创建记录数
	var td = document.createElement("TD");
	td.width = 220;
	var pagetext = "";
	pagetext = "共 " + count + " 条记录 " + "第" + curpage + "页/共" + totalpage + "页";
	var div = document.createElement("DIV");
	div.id = "id_print";
	div.appendChild(document.createTextNode(pagetext));
	td.appendChild(div);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	/*
	 * var txt1="每页显示"; var txt2="条"; var td=document.createElement("TD");
	 * td.width=70; td.appendChild(document.createTextNode(txt1));
	 * tr.appendChild(td); 添加选择显示数下拉框 var td=document.createElement("TD");
	 * td.width=45; var option7=document.createElement("option");
	 * option7.value=2; if(option7.value==page.pageSize){ option7.selected=true; }
	 * option7.appendChild(document.createTextNode("4")); var
	 * option1=document.createElement("option"); option1.value=10;
	 * if(option1.value==page.pageSize){ option1.selected=true; }
	 * option1.appendChild(document.createTextNode("10")); var
	 * option2=document.createElement("option"); option2.value=20;
	 * if(option2.value==page.pageSize){ option2.selected=true; }
	 * option2.appendChild(document.createTextNode("20")); var
	 * option3=document.createElement("option"); option3.value=50;
	 * if(option3.value==page.pageSize){ option3.selected=true; }
	 * option3.appendChild(document.createTextNode("50")); var
	 * select=document.createElement("select"); select.id="id_pageSize"; if
	 * ($.browser.safari) { select.addEventListener("onchange",me);
	 * select.οnchange=function (){ var
	 * pagesize=document.getElementById("id_pageSize").value;
	 * page.pageSize=pagesize; } } if ($.browser.mozilla) {
	 * select.addEventListener("onchange",me); select.οnchange=function (){ var
	 * pagesize=document.getElementById("id_pageSize").value;
	 * page.pageSize=pagesize; } } if(window.addEventListener) // Mozilla,
	 * Netscape, Firefox { select.addEventListener("change",me,false);
	 * select.change=function(){ var
	 * pagesize=document.getElementById("id_pageSize").value;
	 * if(page.pageSize==option3.value){ option3.selected=true; }else
	 * if(page.pageSize==option2.value){ option2.selected=true; }else{
	 * option1.selected=true; } page.pageSize=pagesize; } }else//IE {
	 * select.attachEvent("onchange",me); select.οnchange=function (){ var
	 * pagesize=document.getElementById("id_pageSize").value;
	 * page.pageSize=pagesize; } } select.appendChild(option7);
	 * select.appendChild(option1); select.appendChild(option2);
	 * select.appendChild(option3); td.appendChild(select); tr.appendChild(td);
	 * var td=document.createElement("TD"); td.width=50;
	 * td.appendChild(document.createTextNode(txt2)); tr.appendChild(td);
	 * tbody.appendChild(tr); tab.appendChild(tbody);
	 */
	// 添加首页
	var td = document.createElement("TD");
	td.width = 40;
	var img = document.createElement("IMG");
	img.onclick = function() {
		page.currentPage = 1;
		page.count = count;
	}
	img.title = "首页";
	img.style.cssText = "cursor:hand";
	if (page.currentPage == 1) {
		img.src = "../axfw/img/first_0.gif";
	} else {
		img.src = "../axfw/img/first_1.gif";
		img.className = "abc";
		if ($.browser.msie) {
			img.attachEvent("onclick", me);
		} else {
			img.addEventListener("click", me, false);
		}
	}
	td.appendChild(img);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	// 添加上一页
	var td = document.createElement("TD");
	td.width = 40;
	var img = document.createElement("IMG");
	img.onclick = function() {
		page.currentPage = parseInt(curpage) - 1;
		page.count = count;
	}
	img.title = "上一页";
	img.style.cssText = "cursor:hand";
	if (parseInt(curpage) > 1) {
		img.src = "../axfw/img/prev_1.gif";
		img.className = "abc";
		if ($.browser.msie) {
			img.attachEvent("onclick", me);
		} else {
			img.addEventListener("click", me, false);
		}
	} else {
		img.src = "../axfw/img/prev_0.gif";
	}
	td.appendChild(img);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	// 添加下一页
	var td = document.createElement("TD");
	td.width = 40;
	var img = document.createElement("IMG");
	img.onclick = function() {
		page.currentPage = parseInt(curpage) + 1;
		page.count = count;
	}
	img.title = "下一页"
	img.src = "../axfw/img/next_1.gif";
	img.style.cssText = "cursor:hand";
	if (parseInt(curpage) < parseInt(totalpage)) {
		img.className = "abc";
		if ($.browser.msie) {
			img.attachEvent("onclick", me);
		} else {
			img.addEventListener("click", me, false);
		}
	} else {
		img.src = "../axfw/img/next_0.gif";
	}
	td.appendChild(img);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	// 添加末页
	var td = document.createElement("TD");
	td.width = 40;
	var img = document.createElement("IMG");
	img.onclick = function() {
		page.currentPage = parseInt(totalpage);
		page.count = count;
	}
	img.title = "末页";
	if (parseInt(curpage) == totalpage) {
		img.src = "../axfw/img/last_0.gif";
	} else {
		img.src = "../axfw/img/last_1.gif";
		img.className = "abc";
		img.style.cssText = "cursor:hand";
		if ($.browser.msie) {
			img.attachEvent("onclick", me);
		} else {
			img.addEventListener("click", me, false);
		}
	}
	td.appendChild(img);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	// 添加文本框
	var td = document.createElement("TD");
	td.width = 43;
	var pageinput = document.createElement("INPUT");
	pageinput.id = "id_pageinput";
	pageinput.type = "text";
	pageinput.size = 1;
	// pageinput.οnkeydοwn=onkeydownapp(me);
	/*
	 * function onkeydownapp(obj){ if (event.keyCode == 13) { obj; } }
	 */
	td.appendChild(pageinput);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	/*
	 * $(document).keydown(function(event){ //这里如果写成$(window)，在ie下面就不会起作用
	 * if(event.keyCode==13){ alert(123); return false; } });
	 */
	/*
	 * pageinput.attachEvent("onkeyup",me); pageinput.οnkeyup=function (){
	 * //alert(event.keyCode); var val=pageinput.value; if (event.ctrlKey &&
	 * event.keyCode == 13) { var
	 * curpage=document.getElementById("id_pageinput").value; if(curpage==""){
	 * Dialog.alert("请输入数值",function(){}, 190, 60); return; }
	 * if(isNaN(curpage)){ Dialog.alert("请输入数值",function(){}, 190, 60); return; }
	 * if(parseInt(curpage)>parseInt(totalpage)){
	 * Dialog.alert("超过最大页数",function(){}, 190, 60); return; } if(curpage<=0){
	 * Dialog.alert("页数应该大于0",function(){}, 190, 60); return; }
	 * page.currentPage=parseInt(curpage); page.count=count; }else{
	 * pageinput.value=val; } }
	 */
	// 添加GO
	var td = document.createElement("TD");
	td.width = 30;
	var pagea = document.createElement("A");
	pagea.title = "跳到";
	// pagea.innerText="GO";
	pagea.appendChild(document.createTextNode("GO"));
	pagea.href = "javascript:void(0);";
	pagea.onclick = function() {
		var curpage = document.getElementById("id_pageinput").value;
		if (curpage == "") {
			alert("请输入数值");
			return;
		}
		if (isNaN(curpage)) {
			alert("请输入数值");
			return;
		}
		if (parseInt(curpage) > parseInt(totalpage)) {
			alert("超过最大页数");
			return;
		}
		if (curpage <= 0) {
			alert("页数应该大于0");
			return;
		}
		page.currentPage = parseInt(curpage);
		page.count = count;
	}
	//pagea.attachEvent("onclick", me);
	if ($.browser.msie) {
		pagea.attachEvent("onclick", me);
	} else {
		pagea.addEventListener("click", me, false);
	}
	td.appendChild(pagea);
	tr.appendChild(td);
	tbody.appendChild(tr);
	tab.appendChild(tbody);
	if (arguments.length == 3) {
		try {
			// 清除分页
			document.getElementById(arguments[2]).innerHTML = "";
			// 添加到页面
			document.getElementById(arguments[2]).appendChild(tab);
		} catch (e) {
		}
	} else {
		try {
			document.getElementById("id_pageDiv").innerHTML = "";
			// 添加到页面
			document.getElementById("id_pageDiv").appendChild(tab);
		} catch (e) {
		}
	}
}

 

风云正
关注
专栏目录
用JS实现分页功能
Steven_2669的博客
08-10 3519
最近做项目的时候又碰到了分页，不想用网上的插件，于是就自己捣鼓了一下，在这里把过程写下来，分享一下经验。 首先，我们应该明确一下分页的逻辑步骤： 从后台获取数据（我这里用的是AJAX获取） 确定每页显示数量以及总页数 显示数据 接下来，开始写代码： .html部分 假设html文件里已经有一个表格框架和分页按钮，默认页数设为1（为了方便我直接用bootstrap框架写分页按钮） d
纯简单JS分页
lgh_msn的专栏
12-11 2265
<br />做项目时偶尔有需求：数据一次性加载到页面同时还要实现分页，此时有两种方式一种是提交到当前页，这个里面会有一些变量需要置为hidden域，另外一种就是纯js分页。利用第一种方式效率不太高，存在多次访问数据库的问题，因而对于这种需要常常采用第二种方式。demo如下，实现思路：页面数据一次性全部加载完毕，js部分通过函数控制其是否显示达到分页的功能，有一个方法通过递归即可全部实现上一页、下一页、首页、尾页的功能，同时页面显示的分页点击部分也是由js内部innerHTML写入<br /> <br />1
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
JS分页
南无阿弥豆腐的博客
07-29 567
//当前页数 var currentPage; //首页点击事件 $("#homePage").click(function() { if(currentPage!=1){ goPage(1); currentPage=1; } }); //尾页点击事件 $("#endPage").click(function() { if(curre...
利用js制作html table分页示例(js实现分页)
10-26
描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...
JS 实现分页打印功能
01-19
在调用window.print()时，可以实现打印效果，但内容太多时要进行分页打印。 在样式中有规定几个打印的样式 page-break-before和page-break-after CSS属性并不会修改网页在屏幕上的显示，这两个属性是用来控制文件的...
JS实现分页效果代码.zip
07-04
本资源“JS实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案，特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...
JS实现分页导航效果
11-21
通过JS自己简单实现了效果。下面和大家分享一下。 内容 下图为首次加载后的效果，默认显示5页， 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代码 第一部分是在页面显示内容的处理 function ...
JQuery AJAX 分页，跳页下一页，上一页【总结了一天啊干货】
热门推荐
九天工作室
10-09 1万+
网上的分页基本有问题，自己总结下：代码如下 var pagesi = "2";//每页行数 var totalPage = "0";//总页数 var currentPage = "1";//当前页 $(function(){ $('.menu_item').click(function () { $('.menu_
基于js分页实现（简单）
01-10
使用javacript实现分页技术，简单明了。没有多以的步骤！
js分页
寻找心的旅程
09-29 484
(function($) { var ms = { init : function(obj, args) { return (function() { ms.fillHtml(obj, args); ms.bindEvent(obj, args); })(); }, // 填充html fillHtml : function(obj, args) { return
【js】js实现分页01
qq_36557846的博客
09-01 1250
js实现分页
js页面分页
dufuyun5的专栏
04-29 584
// 分页相关 let pageUtil = {}; pageUtil.pageIndex = 1; // 当前页数 pageUtil.pageRows = 0; // 每页记录数 pageUtil.pageCount = 0; // 总页数 pageUtil.list = []; // 要分页的list数据 pageUtil.curList = []; // 当前页显示的数据 ...
js数据分页
ICY___的博客
01-28 1739
这个案例大概是半个月之前做的，由于当时做完以后觉得比较难以接受且不太好理解（代码也比较多一点），就先将它放下了，沉淀过后，我觉得是时候拿出来与大家分享了！ 整体思想框架：（我想把这些注释拿出来会更好一些） 提前剧透一下，个人认为数据分页的页码算法是最复杂的，同时和图片轮播一样，关于当前页的bug会比较多，毕竟到达所需页的执行方式有多种（点击翻页页、点击页数、点击跳转页、三者混合操作），所以就...
js分页工具
一杯咖啡
01-27 879
js代码/** * 分页js */ var Page; (function(){ var Page = {version:"1.0",author:"liuxingmi"}; var showPage = 9; Page.navigation = function(divId, totalRecord, totalPage, currentPage, func){
js制作分页
勋勋勋勋小勋勋的博客
09-10 231
欢迎大家一起交流学习n(*≧▽≦*)n 效果： 图标引入方式为symbol引用 html: <div class="page" style="margin: 400px;"> </div> <script src="./js/paging.js"></script> <script> $(".page").Pagin...
JS实现分页
午夜学徒xpf的博客
07-29 389
后台返回数据，不做分页，前端js实现分页效果。 //显示内容 <div id="contentlist"></div> //显示页码 <div id="turnpage" class="turnpage"></div> js实现： //动态显示翻页信息 function showPage() { var pageContent = '...
js分页（简单，暴力，迅捷）
qq_41639347的博客
04-24 428
引入两个文件即可，js，css文件 文件可以去码云上取 https://gitee.com/Feudallord/JSNativePaging <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="st...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值