检索信息分页显示2,版本2.0

Posted 2020-08-08 代码改变生活

先在改成纯利用js进行分页,首先查询出所有记录,初始化通过jquery控制只知显示首页内容,创建页面切换功能的函数,每次显示固定的内容行并把其他内容行隐藏,这样只需要一次提交就可以实现分页,但是仍有缺点,就是如果数据量很多很多,会严重影响性能:-------合理的想法是每次先取出一部分的内容,比如先去除前30行的内容,等浏览到第31行时再进行一数据库的检索,先看看这个版本的

package com.mi.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.mi.form.PageTableForm;
import com.mi.service.impl.UserInfoServiceImpl;

@Controller
@RequestMapping("/user")
public class UserInfoCotroller {

    @Autowired
    private UserInfoServiceImpl userInfoServiceImpl;

    private PageTableForm pageTableForm;

    @RequestMapping("/init")
    public String init(Model model) {
        pageTableForm = new PageTableForm();
        return "redirect:/user/query.do";
    }

    @RequestMapping("/query")
    public String queryUserInfo(Model model, PageTableForm pageTableForm) {
        pageTableForm = userInfoServiceImpl.queryUserInfo(pageTableForm);
        model.addAttribute("pageTableForm", pageTableForm);
        return "userInfo";
    }

    public UserInfoServiceImpl getUserInfoServiceImpl() {
        return userInfoServiceImpl;
    }

    public void setUserInfoServiceImpl(UserInfoServiceImpl userInfoServiceImpl) {
        this.userInfoServiceImpl = userInfoServiceImpl;
    }

    public PageTableForm getPageTableForm() {
        return pageTableForm;
    }

    public void setPageTableForm(PageTableForm pageTableForm) {
        this.pageTableForm = pageTableForm;
    }

}

package com.mi.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.mi.dao.UserInfoMapper;
import com.mi.entity.User;
import com.mi.form.PageTableForm;
import com.mi.service.UserInfoService;

@Service("userInfoService")
public class UserInfoServiceImpl implements UserInfoService {

    @Autowired
    private UserInfoMapper userInfoMapper;
    
    private List<User> userList;
    @Override
    public PageTableForm queryUserInfo(PageTableForm pageTableForm) {
        userList = userInfoMapper.queryUserInfo();
        pageTableForm.setUserList(userList);
        return pageTableForm;
    }
    

    public UserInfoMapper getUserInfoMapper() {
        return userInfoMapper;
    }
    public void setUserInfoMapper(UserInfoMapper userInfoMapper) {
        this.userInfoMapper = userInfoMapper;
    }

    @Override
    public int getCount() {
        return userInfoMapper.getCount();
    }

    public List<User> getUserList() {
        return userList;
    }

    public void setUserList(List<User> userList) {
        this.userList = userList;
    }

}

package com.mi.dao;

import java.util.List;

import org.springframework.stereotype.Repository;

import com.mi.entity.User;

@Repository("userInfoMapper")
public interface UserInfoMapper {
    
    public List<User> queryUserInfo();
    
    public int getCount();
}

package com.mi.form;

import java.util.List;

import com.mi.entity.User;

public class PageTableForm {

    private int currentPage;// 当前页
    private int pageSize = 3;// 每页记录数
    private int beginIndex;// 开始位置
    private int endIndex;// 结束位置
    private int pageCount;// 共多少页
    private int userCount;// 共多少条记录
    
    private List<User> userList;

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getBeginIndex() {
        return beginIndex;
    }

    public void setBeginIndex(int beginIndex) {
        this.beginIndex = beginIndex;
    }

    public int getEndIndex() {
        return endIndex;
    }

    public void setEndIndex(int endIndex) {
        this.endIndex = endIndex;
    }

    public int getPageCount() {
        return pageCount;
    }

    public void setPageCount(int pageCount) {
        this.pageCount = pageCount;
    }

    public int getUserCount() {
        return userCount;
    }

    public void setUserCount(int userCount) {
        this.userCount = userCount;
    }

    public List<User> getUserList() {
        return userList;
    }

    public void setUserList(List<User> userList) {
        this.userList = userList;
    }

}

<?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.mi.dao.UserInfoMapper">
    
    
    <select id="queryUserInfo" resultType="com.mi.entity.User">
        SELECT id,user_name userName,age FROM user_t where 1=1
    </select>
    
    <select id="getCount" resultType="int">
        SELECT count(*) FROM user_t
    </select>
    <!-- <insert id="addUser" parameterType="com.mi.entity.User"
        flushCache="true">
        INSERT INTO user_t (id,user_name,password,age) VALUES
        (#{id},#{userName},#{password},#{age})
    </insert>
    
    <delete id="deleteUser" parameterType="com.mi.entity.User" flushCache="true">
        DELETE FROM user_t where id=#{id}
    </delete>
    
    <update id="updateUser" parameterType="com.mi.entity.User" flushCache="true">
        UPDATE user_t SET user_name = ‘zzxy‘ WHERE id=#{id}
    </update> -->
    
</mapper>

页面+js

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!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 type="text/css">
.page{
    width:200px;
}
.page span{
    margin-left:30px;
}
a{
    text-decoration:none;
}
</style>
<script type="text/javascript"
    src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $(function() {
        var $table = $("table");
        var currentPage = 1;
        var pageSize = 3;
        var sumRows = $table.find("tbody tr").length;
        var sumPages = Math.ceil(sumRows/pageSize);
        
        init();
        paging(currentPage)
        
        
        $("#prev").click(function(){
            currentPage--;
            init();
            paging(currentPage);
        })
        
        $("#next").click(function(){
            currentPage++;
            init();
            paging(currentPage);
        })
        
        var $page = $("<div class=‘page‘></div>");
        for(var pageIndex=1;pageIndex<=sumPages;pageIndex++){
            $("<a href=‘#‘><span>["+(pageIndex)+"]</span></a>").bind("click",{"newPage":pageIndex},function(event){
                currentPage=event.data["newPage"];//值得参考
                init();
                paging(currentPage);
            }).appendTo($page);
        }
        $page.insertAfter($table);
        
        function paging(currentPage){
            $table.find("tbody tr:not(.prevnext)").hide().slice((currentPage-1)*pageSize,(currentPage)*pageSize).show();
            $("#currentPage").val(currentPage+1);
            $("#currentPage").text(currentPage);
            $("#sumPages").text(sumPages);
        }
        
        function init(){
            if(currentPage==1){
                $("#prev").attr({"disabled":"disabled"});
            }else{
                $("#prev").removeAttr("disabled");
            }
            if(currentPage==sumPages){
                $("#next").attr({"disabled":"disabled"});
            }else{
                $("#next").removeAttr("disabled");
            }
        }
        
    })
</script>
</head>
<body>
    <form action="${pageContext.request.contextPath}/user/query.do" id="form0" method="POST">
        <table border="1">
            <thead>
                <tr>
                    <td width="60px">id</td>
                    <td width="120px">name</td>
                    <td width="60px">age</td>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="user" items="${pageTableForm.userList}" varStatus="status">
                    <tr>
                        <td>${user.id}</td>
                        <td>${user.userName}</td>
                        <td>${user.age}</td>
                    </tr>
                </c:forEach>
                <tr class="prevnext">
                    <td>
                        <input id="prev" type="button" value="上一页">
                    </td>
                    <td>当前<label id="currentPage"></label>页/共<label id="sumPages"></label>页</td>
                    <td>
                        <input id="next" type="button" value="下一页">
                    </td>
                </tr>
                
            </tbody>
        </table>
        <input id="currentPage" type="hidden" name="currentPage" value="${pageTableForm.currentPage}">
    </form>
</body>
</html>

最终效果:

 

总结一下,发现任何代码都极有可能重复,任何功能都极有可能一句话完成!