SSM简单分页及其思路

稍微总结下，今天的小测验：分页

1.首先，明白分页的基本查询语句（采用Mysql数据库）：

   startPage:  定义查询数据库的起始位置

   pageSize:  定义每页显示的数量

   如：select * FROM limit 0,5 表示从数据库第一条到第五条的数据

SELECT * FROM type limit startPage,pageSize

 

2.了解分页语句所需要的一些条件：

    1.  起始页

    2.  显示的条数

    3.  查询数据库中的所有条数（目的是通过所有条数去得到所有的页数）

    4.  显示所有查询的数据，用集合封装。

    5.  显示所有的页数（前端显示）

    创建Page类

import java.util.List;

public class Page<T> {
    private int currentPage;//当前页数
    private int pageSize;//每页显示的记录数
    private int totalCount;//总记录数
    private int totalPage;//总页数
    private List<T> lists;//每页的显示的数据


    public int getCurrentPage() {
        return currentPage;
    }

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

    public int getPageSize() {
        return pageSize;
    }

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

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(int totalPage) {
        this.totalPage = totalPage;
    }

    public List<T> getLists() {
        return lists;
    }

    public void setLists(List<T> lists) {
        this.lists = lists;
    }

    @Override
    public String toString() {
        return "Page{" +
                "currentPage=" + currentPage +
                ", pageSize=" + pageSize +
                ", totalCount=" + totalCount +
                ", totalPage=" + totalPage +
                ", lists=" + lists +
                '}';
    }
}

 

3.page的dao和数据库操作

    //分页查询
    public List<Type> findPage(HashMap<String,Object> map);

    //查询总条数
    public int  selectCount();

         <!--查询条数-->
        <select id="selectCount" resultType="int">
            SELECT COUNT(*) FROM type
        </select>


        <!--分页查找
            用map封装的原因：在逻辑代码中，将起始页和显示页数封装到map集合里
        -->
        <select id="findPage" parameterType="Map" resultType="Type">
            SELECT * FROM type
            <if test="start != null and size != null">
                LIMIT  #{start},#{size}
            </if>
        </select>

4.  分页的逻辑操作

import com.item.pojo.Page;
import com.item.pojo.Type;

import java.util.HashMap;
import java.util.List;

public interface TypeManagerService {

    //由于不需要查询数据的总条数，故不需要创建接口，只需创建一个分页查询的接口
    public Page<Type> findPage(int currPage);
}

@Service
@Transactional
public class TypeManagerServiceImpl implements TypeManagerService {
    @Autowired
    private TypeManageDao typeManageDao;

    public Page<Type> findPage(int currentPage){
        HashMap<String,Object> map = new HashMap<String,Object>();
        Page<Type> page = new Page<Type>();

        //封装当前页
        page.setCurrPage(currentPage);

        //每页显示的数量
        int pageSize=2;
        page.setPageSize(pageSize);

        //封装总记录数
        int pageall = typeManageDao.selectCount();
        page.setTotalCount(pageall);

        //封装总条数
        int tc = pageall;
        int count = (int) Math.ceil(tc/pageSize);//向上取整
        page.setTotalPage(count);

        System.out.println(page.getCurrentPage());
        map.put("start",(page.getCurrentPage()-1)*pageSize);
        map.put("size", page.getPageSize());

        //封装每页显示的数据
        List<Type> types = typeManageDao.findPage(map);
        page.setLists(types);
        return page;
    }
}

 

5.  Controller类

package com.item.controller;



import com.google.gson.Gson;
import com.item.pojo.Page;
import com.item.pojo.Type;
import com.item.service.TypeManagerService;

import java.util.ArrayList;

import java.util.List;

@Controller
public class TypeManager {
    @Autowired
    private TypeManagerService typeManagerService;

    @RequestMapping(value = "/test",produces = "text/plain;charset=utf-8"/*防止数据到前端乱码*/)
    @ResponseBody
    public  String test(@RequestParam(defaultValue="1")int currentPage  /*如果没有得到当前的页面值，默认为第一页*/, Model model){
        Page<Type> list = typeManagerService.findPage(currentPage);
        //显示查询的数据
        System.out.println(list);
        model.addAttribute("lists",list);

        Gson gson = new Gson();
        String att = gson.toJson(list);
        return att;
    }
}

6.  前台html代码:

<html>
<head>
    <title>Title</title>
</head>
<body>
    <button id="select" class="select">查找类型</button>
    <table border="1">
        <thead>
            <td>id</td>
            <td>名称</td>
            <td>简述内容</td>
        </thead>
        <tbody id="tb" class="tb" ></tbody>
        <tfoot id="tf"></tfoot>
    </table>
</body>
</html>

7. ajax异步请求代码：

<script type="text/javascript">
    $("#select").click(function () {
        select();
    });

    function select(a) {
        $.ajax({
            url:'/test',
            type:'get',
            data:{"currentPage":a},
            contentType: 'application/x-www-form-urlencoded; charset=utf-8',
            dataType:'json',
            success:function (data) {
                //每次查询前清除前面显示的值
                $("#tb").empty();
                $("#tf").empty();

                //获取的数据
                var htm = "";
                //页面显示
                var page= "";
                console.log(data.currPage);
                $.each(data.lists,function (index,obj) {
                    htm+="<tr><td>"+obj.type_id+"</td><td>"+obj.type_name+"</td><td>"+obj.type_describe+"</td></tr>";
                })
                
                //如果查询的数据小于显示的数据，则只显示首页
                if (data.totalCount <data.pageSize) {
                    page+='<a class="select" id=""  href="javascript:select('+1+')">首页</a>'
                }else{
                    for (var i= 0;i<Math.ceil(data.totalCount/data.pageSize);i++){
                        page+='<a class="select" id=""  href="javascript:select('+(i+1)+')">'+(i+1)+'</a>     '
                    }

                }
                $("#tb").append(htm);
                $("#tf").append(page);
            }
        })
    }
</script>

8.网页显示页面：