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.onchange=function (){ var
* pagesize=document.getElementById("id_pageSize").value;
* page.pageSize=pagesize; } } if ($.browser.mozilla) {
* select.addEventListener("onchange",me); select.onchange=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.onchange=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.onkeydown=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.onkeyup=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实现分页效果代码.zip”提供了一种用JavaScript实现分页功能的解决方案，特别适用于动态加载数据或者需要优化用户浏览体验的场合。以下是对这个压缩包中包含的两个文件及其相关知识点的详细解释。 1. **...
描述和标签提到的“js实现分页”和“table分页”指的是用JavaScript编写代码来控制表格数据的分页显示。实现分页的步骤一般包括设置每页显示的数据条数、获取数据总条数、计算总页数、控制当前页数变量以及能够实现...
在这个场景中，我们将深入探讨如何使用JavaScript来实现分页功能。 一、理解分页原理 1. 数据源：首先，你需要一个数据源，这可能是从服务器获取的JSON数据或者是静态数组。分页的核心是根据每页显示的数据量来...
本篇将详细介绍两个纯JavaScript实现分页的经典例子，帮助你理解和掌握这一核心技术。 首先，我们要明白分页的基本原理：将大量数据分为若干个部分，每次只加载一部分到页面上，用户可以通过导航按钮切换不同的数据...
本文将详细讨论如何使用纯JavaScript实现分页功能，以及如何实现跳转指定页和自定义样式。 首先，我们需要理解分页的基本原理。分页通常涉及到两个关键参数：每页显示的数据量（每页条数）和当前页数。根据这些参数...
这个压缩包“简单JS实现分页带数据查询效果.zip”提供了一个使用JavaScript实现分页和数据查询的示例。下面我们将详细探讨这个主题。 1. **基础概念** - **分页**：为了提高用户体验和页面加载速度，将大量数据...
本示例“js实现分页的例子”是利用JavaScript来实现动态分页功能，尤其适用于上下滚动时自动加载更多内容的无限滚动效果。 JavaScript，简称JS，是Web开发中的主要脚本语言，它可以直接在浏览器端运行，负责处理...
纯js实现分页模版页面，是参考别的网站的代码，供学习参考
在这个主题中，我们将深入探讨如何利用`mui.js`来实现分页功能，以及它与`jQuery`的关系。 首先，分页功能在网页应用中极为常见，特别是在数据量大、需要分批加载的场景下。`mui.js`提供了一个内置的分页组件，可以...
得用JavaScript面向对象编程，编写了一个分页通过控件。代码精简，功能强大.
本文将深入探讨如何使用JavaScript实现分页功能，以及相关的技巧和注意事项。 首先，我们需要理解分页的基本概念。通常，一个分页系统包括以下几个关键部分： 1. **总记录数**：这是你要展示的数据总数。 2. **每...
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
总结来说，"JS+HTML分页代码"是一个实用的前端解决方案，通过结合HTML和JavaScript实现了基本的分页功能，适用于多种数据展示场景。理解和掌握这个功能的实现原理，对于提升Web开发能力大有裨益。
接下来，我们将在`js`目录下的`pagination.js`文件中编写JavaScript代码，实现分页功能。假设我们有一个JSON数组，包含了所有要显示的数据： ```javascript // 假设的数据 var allData = [ // 数据项... ]; // 每...
总的来说，使用原生JS和CSS实现分页虽然相比使用预封装的库更繁琐，但能提供更高的定制性，并有助于提升开发者对Web基础技术的理解。通过结合HTML布局、CSS样式和JavaScript逻辑，我们可以构建出符合项目需求的高效...
在这个实例中，我们将探讨如何使用 `jquery.pagination.js` 实现三种不同的分页形式：基本分页、AJAX 无刷新分页以及自定义分页属性。 **基本分页** 基本分页是最简单的应用场景，通常用于展示固定数量的数据集。...
在JavaScript中，实现分页功能通常分为以下几个步骤： 1. **初始化配置**：设置每页显示的数据量、总数据量以及当前页数。这些参数可以通过HTML元素的属性或者JavaScript对象来传递。 2. **数据处理**：根据当前...
以Entity Framework为例，我们可以通过Linq查询语言来获取所需的数据，并实现分页功能。例如，我们可以编写如下的代码片段： ```csharp public ActionResult GetPagedData(int currentPage, int pageSize) { var ...
本篇将深入探讨JavaScript实现分页的相关知识点，包括前台分页、客户端分页、分页机制以及相关的JavaScript代码示例。 首先，我们要理解什么是分页。在Web应用中，分页是将大量数据分成多个小部分（每部分通常称为...