2019-05-28 分页设计

分页组件mricode

分页插件下载

如何使用

首先导入css和js

<link href="mricode.pagination.css" rel="stylesheet" />
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
<script src="mricode.pagination.js"></script>

创建分页显示标签

<div id="page" class="m-pagination"></div>

Ajax分页

初始化

    <script>
        $(function () {
            // 发送ajax查询需要的数据以及记录总数
            $("#page").pagination({
                pageIndex : 0,
                pageSize: 5,
                remote: {
                    url: '${pageContext.request.contextPath}/page/loadIndexInfo',
                    success: function (data) {
                        // data为ajax返回数据
                        console.log(data);
                        var html = template("artmodel",data);
                        $('#artul').html("");
                        $('#artul').append(html);
                    }
                }
            });
        })
    </script>

这里的分页组件与我们之前自己手写的分页原理相同，但ajax需要发送的参数以及相应数据mricode已经帮我们设计好了，我们只需要返回相应的数据，以及在前端完成页面的渲染即可

渲染采取我们之前学习的arttemplate模板

分页原理

        // 发ajax查询
          $.get(
                  "${pageContext.request.contextPath}/page",
                  {
                    "pageIndex" : 0,
                    "pageSize" : 5
                  },
                  function (res) {
                    // 5条记录+total
                    console.log(res.list);//  [{…}, {…}, {…}, {…}, {…}]
                    console.log(res.total);
                    for(i in res.list){
                      $('#box').append(res.list[i].ename+","+res.list[i].deptno+","+res.list[i].sal+"<br>")
                    }
                    var x = 0;
                    // 处理分页
                    if(res.total%5!=0){
                        x = Math.ceil(res.total/5);// 4
                    }else{
                        x = res.total/5;// 15/5 3
                    }
                    for(var i = 0;i < x;i++){
                      $('#page').append('<a href="javascript:;" aid="'+i+'" style="margin-right: 20px">'+(i+1)+'</a>');
                    }
                  },
                  "json"
          )
              
          $(document).on('click','a',function () {
            $.get(
                    "${pageContext.request.contextPath}/page",
                    {
                      "pageIndex" : $(this).attr('aid'),
                      "pageSize" : 5
                    },
                    function (res) {
                      // 5条记录+total
                      console.log(res.list);
                      console.log(res.total);
                      $('#box').html('');
                      for(i in res.list){
                        $('#box').append(res.list[i].ename+","+res.list[i].deptno+","+res.list[i].sal+"<br>")
                      }
                      var x = 0;
                      // 处理分页
                      if(res.total%5!=0){
                        x = Math.ceil(res.total/5);
                      }else{
                        x = res.total/5;
                      }
                      $('#page').html('');
                      for(var i = 0;i < x;i++){
                        $('#page').append('<a href="javascript:;" aid="'+i+'" style="margin-right: 20px">'+(i+1)+'</a>');
                      }
                    },
                    "json"
            )
          });

@WebServlet(name = "PageServlet",urlPatterns = "/page")
public class PageServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 获取请求参数
        String pageIndex = request.getParameter("pageIndex");// 0 1
        String pageSize = request.getParameter("pageSize");// 5

        Page page = new Page();
        page.setPageIndex(Integer.parseInt(pageIndex)*Integer.parseInt(pageSize));// 0*5,5 1*5,5 2*5,5
        page.setPageSize(Integer.parseInt(pageSize));// 5

        // 给Dao
        ArticleDao articleDao = new ArticleDaoImpl();
        List<Map<String, Object>> list = articleDao.getPage(page); // 5条记录
        int total = articleDao.getTotal(); // 一共有多少条

        PageInfo pageInfo = new PageInfo();
        pageInfo.setList(list);
        pageInfo.setTotal(total);

        response.getWriter().println(JSON.toJSONString(pageInfo));
    }
}

 @Override
    public List<Map<String, Object>> getPage(Page page) {
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<Map<String, Object>> list = new ArrayList<>();
        try {
            conn = DBUtils.getInstance().getConnection();
            ps = conn.prepareStatement("select ename,sal,deptno from emp limit ?,?");
            ps.setInt(1,page.getPageIndex());// 2*5
            ps.setInt(2,page.getPageSize());
            rs = ps.executeQuery();
            while(rs.next()){
                Map<String, Object> map = new HashMap<>();
                map.put("ename",rs.getString("ename"));
                map.put("sal",rs.getDouble("sal"));
                map.put("deptno",rs.getInt("deptno"));
                list.add(map);
            }
        } catch (Exception e) {
            try {
                conn.rollback();
            } catch (SQLException e1) {
                e1.printStackTrace();
            }
            e.printStackTrace();
        } finally {
            DBUtils.getInstance().close(conn);
            DBUtils.getInstance().close(rs);
            DBUtils.getInstance().close(ps);
        }
        return list;
    }

    @Override
    public int getTotal() {
        int count = 0;
        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        List<Map<String, Object>> list = new ArrayList<>();
        try {
            conn = DBUtils.getInstance().getConnection();
            ps = conn.prepareStatement("select count(*) counts from emp");
            rs = ps.executeQuery();
            if(rs.next()){
                count = rs.getInt("counts");
            }
        } catch (Exception e) {
            try {
                conn.rollback();
            } catch (SQLException e1) {
                e1.printStackTrace();
            }
            e.printStackTrace();
        } finally {
            DBUtils.getInstance().close(conn);
            DBUtils.getInstance().close(rs);
            DBUtils.getInstance().close(ps);
        }
        return count;
    }

这里，我们只需要理解分页的原理：每次点击分页按钮，发送自己对应的aid作为第x页的标识，再发送每页显示的数据，servlet调dao层完成查询，响应给前台对应的数据和总记录数，前台对数据进行遍历并根据总记录数渲染分页按钮