如何实现分页？

其他 2021-01-31 20:17
0 阅读

一、分页的原理

满足：position =(pageNo-1)*pageSize，如下图的规律所示：

select * from pagin，得到总数据，结果如下

select * from pagin limit 0,3，得到第一页的数据，每一页显示3条，即pageNo=1,position=0（实际是从第一条开始）,pageSize=3,运行结果如下，显示前三行数据，是我们想要的

select * from pagin limit 3,3，得到第二页的数据，每一页显示3条数据，即pageNo=2,position=3（实际是从第四条开始）,pageSize=3,运行结果如下，显示前最后三条数据，是我们想要的，

因此可得到规律：position =(pageNo-1)*pageSize，因此我们只需要根据此规律去写我么的sql语句，并把得到的数据在前台显示出来即可

二、具体操作

1、创建web项目，搭建SpringMVC环境，这在另一篇文章中有提到，就不再此赘述；

扫描二维码关注公众号，回复： 12433953 查看本文章

2、各部分的代码

前端代码：

index.jsp:

<!--向Controller发送一个请求，到达listView.jsp,显示得到的第一页数据-->
<script>
    location.href="./student/listView.do";
</script>

view文件夹中的代码

listView.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!--配置绝对路径，一劳永逸，不用考虑相对路路径的问题-->
<%
    String path = request.getContextPath();
    pageContext.setAttribute("path",path);
%>
<html>
<head>
    <title>Title</title>
    <script src="${path}/js/jquery-1.8.3.js"></script>
    <script>

        var pageNo=1;
        var pageTotal=0;
        
        <!--点击上一页触发的方法，pageNo会减小-->
        function up() {
            
            <!--提醒已经到达第一页，并return，结束up方法，防止pageNo<0,不符合实际-->
            if (pageNo==1){
                alert("当前已经是第一页");
                return;
            }
            pageNo--;
            pagin();
        }

        <!--点击下一页触发的方法，pageNo会增加-->
        function down() {
            <!--如果pageNo等于总页数，提醒已经到达最后一页 ，并return，结束down方法，防止pageNo无限的增加,不符合实际-->
            if (pageNo==pageTotal){
                alert("当前已经是最后一页");
                return;
            }
            pageNo++;
            pagin();
        }

        <!--当点击up 或者down的时候会执行该方法，会向Controller发请求。得到第一页以后的数据，并把数据返回-->
        function pagin(){
            var  object={
               url:"${path}/student/listFrag.do",
               type:"post",
               data:"pageNo="+pageNo,
               success:function(data){
                   <!--对id=showData的标签清空数据，防止数据不停的追加-->
                   $("#showData").empty();
                   <!--对id=showData的标签追加数据-->
                   $("#showData").append(data);
                   pageTotal=$("#pageTotal").val();
               }
            };
            $.ajax(object);
        }

    </script>
</head>
<body>
    <div id="showData">
        <table border="1px">
            <thead>
            <tr>
                <th>序号</th>
                <th>id</th>
                <th>name</th>
                <th>mobile</th>
                <th>provinceCode</th>
                <th>cityCode</th>
                <th>countyCode</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach var="student" items="${students}" varStatus="status">
                <tr>
                    <td>${status.index+1}</td>
                    <td>${student.id}</td>
                    <td>${student.name}</td>
                    <td>${student.mobile}</td>
                    <td>${student.provinceCode}</td>
                    <td>${student.cityCode}</td>
                    <td>${student.countyCode}</td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
        <input type="hidden" id="pageTotal" value="${pageTotal}"/>
    </div>
    <div style="text-align: center">
        <input type="button" value="上一页" onclick="up()">
        <input type="button" value="下一页" onclick="down()">
    </div>
</body>
</html>

listFrag.jsp,遍历数据，当向Controller第二次发请求，会返回数据，在该也面得到相应的数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<table border="1px">
    <thead>
    <tr>
        <th>序号</th>
        <th>id</th>
        <th>name</th>
        <th>mobile</th>
        <th>popvinceCode</th>
        <th>cityCode</th>
        <th>countyCode</th>
    </tr>
    </thead>
    <tbody>
    <!--遍历数据-->
    <c:forEach var="student" items="${students}" varStatus="status">
        <tr>
            <td>${status.index+1}</td>
            <td>${student.id}</td>
            <td>${student.name}</td>
            <td>${student.mobile}</td>
            <td>${student.provinceCode}</td>
            <td>${student.cityCode}</td>
            <td>${student.countyCode}</td>
        </tr>
    </c:forEach>
    </tbody>
</table>
<!--得到pageTotal-->
<input type="hidden" id="pageTotal" value="${pageTotal}"/>

后端代码

Controller层

@Controller
@RequestMapping("/student")
public class StudentController {

    @Autowired
    private IStudentService studentService;

    @RequestMapping("/listView.do")
    public String listView(Map<String , Object> map){
        Object [] datas = studentService.pagin(1) ;
        map.put("students",datas[1]);
        map.put("pageTotal",datas[0]);
        return "student/listView";
    }

    @RequestMapping("/listFrag.do")
    public String listFrag(Map<String , Object> map,int pageNo){
        Object [] datas = studentService.pagin(pageNo) ;
        map.put("students",datas[1]);
        map.put("pageTotal",datas[0]);
        return "student/listFrag";
    }
}

Service层

IStudentService

public interface IStudentService {
    Object [] pagin(int pageNo);
}

StudentService

@Service
public class StudentService implements  IStudentService {

   @Autowired
   private IStudentDao studentDao;

   public  Object [] pagin(int pageNo){
       return studentDao.pagin(pageNo);
   }
}

IStudentDao


public interface IStudentDao {
    Object [] pagin(int pageNo);
}

StudentDao

@Repository
public class StudentDao implements  IStudentDao{

    @Autowired
    private JdbcTemplate jdbcTemplate;

    public Object [] pagin(int pageNo){

        Object [] datas = new Object[2];
        String sql = "select count(id) from student";

        int pageSize = 3;
        int total = jdbcTemplate.queryForObject(sql,Integer.TYPE);//得到总数据数目
        int pageTotal = total%pageSize==0?total/pageSize:total/pageSize+1;//得到总页数
        datas[0]=pageTotal;

        sql = "select * from student "+ "limit "+(pageNo-1)*pageSize+",3";//分页的sql语句
        //得到学生信息
        datas[1] = jdbcTemplate.query(sql, new RowMapper<Student>() {
            @Override
            public Student mapRow(ResultSet rs, int i) throws SQLException {
            return new Student(rs.getString("id"),rs.getString("name"),rs.getString("mobile"),rs.getString("province_code"),rs.getString("city_code"),rs.getString("county_code"));
            }
        });
        
        return datas;
    }
}

运行结果如下：

猜你喜欢

目录

热门文章