分页（二）h5自定义分页

w_t_y_y

已于 2022-05-17 14:31:52 修改

阅读量872

点赞数

分类专栏：常用技术文章标签： html javascript css

于 2018-01-08 09:32:26 首次发布

本文链接：https://blog.csdn.net/w_t_y_y/article/details/78999463

版权

常用技术专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body {
	margin: 0px;
}

.container {
	width: 100%;
	height: 600px;
}

.head {
	width: 100%;
	height: 20%;
	border: 1px solid black;
	box-sizing: border-box;
}

.main {
	width: 100%;
	height: 80%;
	border: 1px solid black;
	box-sizing: border-box;
}

.head_left {
	width: 20%;
	height: 100%;
	border: 1px solid black;
	box-sizing: border-box; //
	background-color: pink;
	float: left;
}

.head_right {
	width: 80%;
	height: 100%;
	border: 1px solid black;
	box-sizing: border-box;
	border-left: white;
	float: left;
}

.main_left {
	width: 20%;
	height: 100%;
	border: 1px solid black;
	box-sizing: border-box;
	border-top: white;
	float: left;
}

.main_right {
	width: 80%;
	height: 100%;
	border: 1px solid black;
	box-sizing: border-box;
	border-left: white;
	float: left;
	border-top: white;
}

.div1 {
	float: left;
	margin: auto; //
	background-color: palegoldenrod;
	width: 40%;
	height: 100%;
	margin-left: 2%;
}

.div2 {
	height: 10%;
	width: 10%;
	float: left;
	margin-left: 30%;
	margin-top: 5%;
}

.div3 {
	height: 10%;
	width: 10%;
	margin-top: 5%;
	float: left;
	margin-left: 1%;
}

.button {
	width: 100%;
}

.a1 {
	background-color: pink;
}

.tablediv {
	width: 60%;
	height: 100%;
	margin-top: 100px;
	margin: auto;
}

.box {
	width: 30%;
	margin: auto;
	padding: 28px;
	height: 500px;
	position: absolute;
	display: none;
	background-color: gray;
	/* 默认对话框隐藏 */
}

.box.show {
	display: block;
}

.box .x {
	font-size: 18px;
	text-align: right;
	display: block;
}

.box1 {
	width: 30%;
	margin: auto;
	padding: 28px;
	height: 500px;
	margin-left: 40%;
	position: absolute;
	display: none;
	background-color: pink;
	/* 默认对话框隐藏 */
}

.box1.show {
	display: block;
}

.box1 .x {
	font-size: 18px;
	text-align: right;
	display: block;
}

.addform {
	width: 100%;
	height: 100%;
}

.addform input {
	width: 40%;
	margin-left: 30%;
	font-size: 18px;
	margin-top: 5px;
}

.addform1 {
	width: 100%;
	height: 100%;
}

.addform1 input {
	width: 40%;
	margin-left: 30%;
	font-size: 18px;
	margin-top: 5px;
}
</style>
<script type="text/javascript" src="assets/jquery.min.js"></script>
<script type="text/javascript">
	

	//第一页
	function firstpage() {
		$(".page").val("1");
		fun();
	}
	//最后一页
	function lastpage() {
		var sum = $(".sumpage").val();
		$(".page").val(sum);
		fun();
	}
	//前一页
	function prepage() {
		var a = $(".page").val();
		var b = parseInt(a) - 1;
		if (b == 0) {

		} else {
			$(".page").val(b);
			fun();
		}
	}
	//下一页
	function nextpage() {
		var a = $(".page").val();
		var b = parseInt(a) + 1;
		var sum = $(".sumpage").val();
		if (b > sum) {

		} else {
			$(".page").val(b);
			fun();
		}
	}

	//隐藏的新增
	function msgbox(n) {
		document.getElementById('inputbox').style.display = n ? 'block'
				: 'none'; /* 点击按钮打开/关闭 对话框 */
		$(".addform").submit(function() {

			var dt = $(".addform").serialize();
			$.post("add", dt, function(data) {
				alert(data.msg);
			});

			return false;
		})

	}
	//加载数据
	function fun() {
		var dt = $(".form1").serialize();
		$
				.post(
						"getData",
						dt,
						function(data) { //得到数据
							var js = data;
							// alert(js[0].name);

							var str = "<table border='1'><tr>"
									+ "<th>Id</th><th>员工姓名</th><th>年龄</th>"
									+ "<th>薪资</th>" + "<th>操作</th></tr>";
							for (var i = 0; i < js.length; i++) {
								var id = js[i].id;
								var name = js[i].name;
								var age = js[i].age;
								var money = js[i].money;
								str += "<tr>";
								str += "<td class='id" + i + "'>" + id
										+ "</td>";
								str += "<td class='name" + i + "'>" + name
										+ "</td>";
								str += "<td class='age" + i + "'>" + age
										+ "</td>";
								str += "<td class='money" + i + "'>" + money
										+ "</td>";
								str += "<td><input type='button' value='删除' onclick='deleteuser("
										+ i + ")'/>";
								str += "<input type='button' value='修改' onclick='updateuser("
										+ i + ")'/></td>";
								str += "</tr>";

							}
							str += "</table>";
							$(".usertablediv").html(str);

						});

		$.get("count", function(data) { //得到总条数
			//alert(data);
			sum = data;
			$(".sumpage").val(data);
		});
	}

	//页面加载完
	$(function() {
		$(".page").val("1");
		fun();
		
		

	}) //结束

	//隐藏的修改
	function msgbox1(n) {
		document.getElementById('inputbox1').style.display = n ? 'block'
				: 'none'; /* 点击按钮打开/关闭 对话框 */
	}
	$(".addform1").submit(function() {
		return false;
	})

	function updateuser(i) {
		//alert("修改");
		var id = $(".id" + i).html();
		var money = $(".money" + i).html();
		//alert(money);
		$("#id").val(id);
		$("#xz1").val(money);

		msgbox1(1);
		$(".addform1 input").change(function() {

			$(".addform1").submit(function() {

				var dt = $(".addform1").serialize();
				$.post("update", dt, function(data) {
					alert(data.msg);
				});

				return false;
			})

		}) //change事件结束
		/*  */
	}
	//删除
	function deleteuser(i) {

		var id = $(".id" + i).html();

		var dt = "&id=" + id;
		$.post("delete", dt, function(data) {
			alert(data.msg);
		})

	}

	
	
</script>
</head>
<body>
	<!--一开始隐藏的新增div-->
	<div id='inputbox' class="box">
		<a class='x' href='' ; onclick="msgbox(0); return false;">关闭</a>
		<form method="post" class="addform">
			<input type="text" name="name" placeholder="请输入姓名" id="name" /> <input
				type="text" name="age" placeholder="请输入年龄" id="age" /> <input
				type="text" name="xz" placeholder="请输入薪资" id="xz" /> <input
				type="submit" value="提交" />
		</form>
	</div>
	<!--隐藏的修改div-->
	<div id='inputbox1' class="box1">
		<a class='x' href='' ; onclick="msgbox1(0); return false;">关闭</a>
		<form method="post" class="addform1">
			<input type="hidden" name="id" id="id" /> <input type="text"
				name="xz" placeholder="薪资" id="xz1" /> <input type="submit"
				value="提交" />
		</form>
	</div>
	<!--分页表格div-->
	<div class="tablediv">
		<form method="post" class="form1">

			<div>

				<input type="button" value="新增" onClick="msgbox(1)" />
			</div>
			<!--分页表格div-->
			<div class="usertablediv"></div>
			当前第<input type="text" name="page" class="page" />页   共<input
				type="text" name="sumpage" class="sumpage" />页    
			<input type="button" onclick="firstpage()" value="第一页" class="hi" />
			<input type="button" onclick="prepage()" value="上一页" class="hi" /> <input
				type="button" onclick="nextpage()" value="下一页" class="hi" /> <input
				type="button" onclick="lastpage()" value="最后一页" class="hi" />
		</form>

	</div>
</body>
</html>

后台：

package com.iflytek.controller;

import java.util.List;

import javax.annotation.Resource;
import javax.print.attribute.standard.Media;
import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.iflytek.domain.Const;
import com.iflytek.domain.Emp;
import com.iflytek.domain.Message;
import com.iflytek.service.EmpService;

@Controller
public class IndexController {

	@Resource
	private EmpService service;

	@GetMapping("/index")
	public String index() {
		return "index";
	}

	@PostMapping("/getData")
	@ResponseBody
	public List<Emp> get(HttpServletRequest req) {
		int currPage = 1;
		// 判断传递页码是否有效
		if (req.getParameter("page") != null) {
			// 对当前页码赋值
			currPage = Integer.parseInt(req.getParameter("page"));
		}

		List<Emp> list = service.getData(currPage);
		return list;
	}

	@PostMapping("/add")
	@ResponseBody
	public Message add(HttpServletRequest req) {
		String name = req.getParameter("name");
		String a = req.getParameter("age");
		String x = req.getParameter("xz");
		int age = 0;
		int xz = 0;
		try {
			age = Integer.parseInt(a);
		} catch (Exception e) {
			age = 0;
		}
		try {
			xz = Integer.parseInt(x);
		} catch (Exception e) {
			xz = 0;
		}
		Emp emp = new Emp();
		emp.setAge(age);
		emp.setName(name);
		emp.setMoney(xz);
		int id = service.getId();
		emp.setId(id + 1);
		Message message = service.addEmp(emp);
		return message;
	}

	@PostMapping("/update")
	@ResponseBody
	public Message update(HttpServletRequest req) {
		int id = Integer.parseInt(req.getParameter("id"));
		int money = Integer.parseInt(req.getParameter("xz"));
		Emp emp = new Emp();
		emp.setId(id);
		emp.setMoney(money);
		Message message = service.update(emp);
		return message;
	}

	@PostMapping("/delete")
	@ResponseBody
	public Message delete(HttpServletRequest req) {
		int id = Integer.parseInt(req.getParameter("id"));
		System.out.println("id" + id);
		Emp emp = new Emp();
		emp.setId(id);
		Message message = service.delete(emp);
		return message;
	}

	@GetMapping("/count")
	@ResponseBody
	public int count() {
		int count = service.count();
		int pages;
		if (count % Const.PAGE_SIZE == 0) {
			// 对总页数赋值
			pages = count / Const.PAGE_SIZE;
		} else {
			// 对总页数赋值
			pages = count / Const.PAGE_SIZE + 1;
		}
		return pages;

	}
}

service:

package com.iflytek.service;

import java.util.List;


import javax.annotation.Resource;


import org.springframework.stereotype.Service;

import com.iflytek.dao.EmpMapper;
import com.iflytek.domain.Const;
import com.iflytek.domain.Emp;
import com.iflytek.domain.Message;

@Service
public class EmpService {

	@Resource
	private EmpMapper mapper;
	@Resource
	private Message message;
	/*
	public Emp findBlog(int id) {
		return blogMapper.findById(id);
	}*/

	public List<Emp> getData(int currPage) {
		int a = currPage* Const.PAGE_SIZE;
		int b = (currPage-1)*Const.PAGE_SIZE;
		Const const1=new Const();
		const1.setA(a);
		const1.setB(b);
		//return mapper.getData();
		return mapper.find(const1);
	}

	public int getId() {
		// TODO Auto-generated method stub
		return mapper.getId();
	}

	public Message addEmp(Emp emp) {
		System.out.println("a"+emp);
		mapper.addEmp(emp);
		int a=1;
		if(a>=0){
			message.setMsg("添加成功");
			message.setRes(true);
		}else{
			message.setMsg("添加失败");
			message.setRes(true);
		}
		return message;
	}

	public Message update(Emp emp) {
		int a=mapper.updateEmp(emp);
		
		if(a>=0){
			message.setMsg("修改成功");
			message.setRes(true);
		}else{
			message.setMsg("修改失败");
			message.setRes(true);
		}
		return message;
	}

	public Message delete(Emp emp) {
int a=mapper.deleteEmp(emp);
		
		if(a>=0){
			message.setMsg("删除成功");
			message.setRes(true);
		}else{
			message.setMsg("修改失败");
			message.setRes(true);
		}
		return message;
	}

	public int count() {
		// TODO Auto-generated method stub
		return mapper.count();
	}

}

dao：

package com.iflytek.dao;

import java.util.List;

import org.springframework.stereotype.Repository;

import com.iflytek.domain.Const;
import com.iflytek.domain.Emp;

@Repository
public interface EmpMapper {
	

	

	public List<Emp> getData();

	public int getId();

	public void addEmp(Emp emp);

	public int updateEmp(Emp emp);

	public int deleteEmp(Emp emp);

	//public List<Emp> find(int a, int b);

	public List<Emp> find(Const const1);

	public int count();
}

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.iflytek.dao.EmpMapper">
	
	<select id="find" resultType="Emp">
	select * from (select emp.*,rownum rn from emp  where rownum<=#{a} ) where rn>#{b} 
	
	</select>
	
	<select id="getData" resultType="Emp" >
		<!-- select * from (select emp.*,rownum rn from emp  where rownum<=#{a} ) where rn>#{b} -->
	  select * from emp
	</select>
	<select id="getId" resultType="int">
	select max(id) from emp
	</select>
	
	<insert id="addEmp" parameterType="Emp" >
	 insert into emp
    (id, name, age, money)
  values
    (#{id}, #{name}, #{age}, #{money})
	</insert>
	
	<update id="updateEmp" parameterType="Emp" >
	update emp set money=#{money} where id=#{id}
	</update>
	
	<delete id="deleteEmp" parameterType="Emp" >
	delete from emp where id=#{id}
	</delete>
	
	<select id="count" resultType="int">
	select count(*) from emp
	</select>
</mapper>

实体类：

package com.iflytek.domain;
//分页相关实体类
public class Const {
	public static final int PAGE_SIZE = 3;
	private int a;
	private int b;
	public int getA() {
		return a;
	}
	public void setA(int a) {
		this.a = a;
	}
	public int getB() {
		return b;
	}
	public void setB(int b) {
		this.b = b;
	}
}

package com.iflytek.domain;

import java.io.Serializable;

public class Emp implements Serializable{

	private Integer id;
	private String name;
	private int age;
	private int money;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public int getMoney() {
		return money;
	}
	public void setMoney(int money) {
		this.money = money;
	}
	@Override
	public String toString() {
		return "Emp [id=" + id + ", name=" + name + ", age=" + age + ", money=" + money + "]";
	}
	
	
}

w_t_y_y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
分页（二）h5自定义分页

&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd&q
复制链接

扫一扫