SSM-pageHelper分页

最新推荐文章于 2022-01-05 10:46:53 发布

小新的博客

最新推荐文章于 2022-01-05 10:46:53 发布

阅读量112

点赞数

分类专栏： SSM 文章标签： web jquery pageHelper

本文链接：https://blog.csdn.net/weixin_52201271/article/details/116266787

版权

SSM 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

SSM-pageHelper分页

需要在整合完ssm的基础上进行，看前一节

1.引入文件

page.js源码在最底下

重要jar包

2.显示页面

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

        .tcdPageCode{padding: 15px 20px;text-align: left;color: #ccc;}
        .tcdPageCode a{display: inline-block;color: #428bca;display: inline-block;height: 25px;	line-height: 25px;	padding: 0 10px;border: 1px solid #ddd;	margin: 0 2px;border-radius: 4px;vertical-align: middle;}
        .tcdPageCode a:hover{text-decoration: none;border: 1px solid #428bca;}
        .tcdPageCode span.current{display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;color: #fff;background-color: #428bca;	border: 1px solid #428bca;border-radius: 4px;vertical-align: middle;}
        .tcdPageCode span.disabled{	display: inline-block;height: 25px;line-height: 25px;padding: 0 10px;margin: 0 2px;	color: #bfbfbf;background: #f2f2f2;border: 1px solid #bfbfbf;border-radius: 4px;vertical-align: middle;}
    </style>
</head>
<body>
<c:forEach var="food" items="${pageInfo.list}">
    ${food}<br>
</c:forEach>

<div class="tcdPageCode">
</div>
</body>
<script src="js/jquery.min.js" ></script>
<script src="js/page.js" ></script>
<script>
    $(".tcdPageCode").createPage({
        pageCount:${pageInfo.pages},
        current:${pageInfo.pageNum},
        backFn:function(p){
            // alert(p);
            window.location.href ="foodsShowHelp.do?page="+p;
        }
    });
</script>
</html>

3.controller

@Controller
public class FoodsControl {  
	@Resource
    FoodsDao foodsDao;

	@RequestMapping("foodsShowHelp")
    public String foodsShowHelp(int page, Model model) throws IOException {
        int pageSize = 2;
        PageHelper.startPage(page,pageSize);
        PageInfo<Foods> pageInfo = new PageInfo<Foods>(foodsDao.foodsShowHelp());
        model.addAttribute("pageInfo",pageInfo);
        return "showHelp";
    }
}

4.dao

public interface FoodsDao {
    List<Foods> foodsShowHelp();
}

5.mapper

<?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="org.xx.dao.FoodsDao">
    <select id="foodsShowHelp" resultType="foods">
        select * from FOODS
    </select>
</mapper>

6.运行

必须使用这个链接访问，必须携带page参数

foodsShowHelp.do?page=1

7.page.js

//分页插件
/**
 2014-08-05 ch
 **/
(function($){
    var ms = {
        init:function(obj,args){
            return (function(){
                ms.fillHtml(obj,args);
                ms.bindEvent(obj,args);
            })();
        },
        //填充html
        fillHtml:function(obj,args){
            return (function(){
                obj.empty();
                //上一页
                if(args.current > 1){
                    obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
                }else{
                    obj.remove('.prevPage');
                    obj.append('<span class="disabled">上一页</span>');
                }
                //中间页码
                if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
                    obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
                }
                if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
                    obj.append('<span>...</span>');
                }
                var start = args.current -2,end = args.current+2;
                if((start > 1 && args.current < 4)||args.current == 1){
                    end++;
                }
                if(args.current > args.pageCount-4 && args.current >= args.pageCount){
                    start--;
                }
                for (;start <= end; start++) {
                    if(start <= args.pageCount && start >= 1){
                        if(start != args.current){
                            obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
                        }else{
                            obj.append('<span class="current">'+ start +'</span>');
                        }
                    }
                }
                if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
                    obj.append('<span>...</span>');
                }
                if(args.current != args.pageCount && args.current < args.pageCount -2  && args.pageCount != 4){
                    obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
                }
                //下一页
                if(args.current < args.pageCount){
                    obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
                }else{
                    obj.remove('.nextPage');
                    obj.append('<span class="disabled">下一页</span>');
                }
            })();
        },
        //绑定事件
        bindEvent:function(obj,args){
            return (function(){
                obj.on("click","a.tcdNumber",function(){
                    var current = parseInt($(this).text());
                    ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current);
                    }
                });
                //上一页
                obj.on("click","a.prevPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current-1);
                    }
                });
                //下一页
                obj.on("click","a.nextPage",function(){
                    var current = parseInt(obj.children("span.current").text());
                    ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
                    if(typeof(args.backFn)=="function"){
                        args.backFn(current+1);
                    }
                });
            })();
        }
    }
    $.fn.createPage = function(options){
        var args = $.extend({
            pageCount : 10,
            current : 1,
            backFn : function(){}
        },options);
        ms.init(this,args);
    }
})(jQuery);

小新的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SSM-pageHelper分页

SSM-pageHelper分页需要在整合完ssm的基础上进行，看前一节1.引入文件page.js源码在最底下重要jar包2.显示页面<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><html><head> <title
复制链接

扫一扫