MAVEN jq+ajax实现简单分页

最新推荐文章于 2022-03-24 10:00:24 发布

一个人的幽默

最新推荐文章于 2022-03-24 10:00:24 发布

阅读量318

点赞数

jsp页面

<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script><!-- 如果使用本地路径，新手推荐使用绝对路径(不容易出错)-->
</head>
<body>
    <input type="button" value="下一页" id="nextPage">
    <input type="button" value="上一页" id="prePage" disabled>
    <table id="info">
        <thead>
            <tr>
                <td>id</td>
                <td>姓名</td>
            </tr>
        </thead>
        <tbody>

        </tbody>

    </table>
    <input type="hidden"  id="currentPage"><!-- 存储当前页信息-->
    <script type="text/javascript">
    // 页面初始化调用winload
        $(function() {
            winload(1,5);
        });
        $("#prePage").click(function(){
            winload(eval($("#currentPage").val())-1,5);
        });// 字符串转数字
        $("#nextPage").click(function(){
            winload(eval($("#currentPage").val())+1,5);
        });
        //查询数据并添加
        function winload(currentPage,currentCount) {
            $.ajax({
                        url : "pageList.uu",//controller层
                        type : "post",
                        dataType : "json",
                        data : {
                            "currentPage" : currentPage,
                            "currentCount" : currentCount
                        },
                        success : function(data) {
                            $("#currentPage").val(data.currentPage);
                            var s = "";
                            $.each(data.list,function(i,e){
                                s+='<tr><td>'+e.id+'</td><td>'+e.name+'</td></tr>';
                            }); 
                            $("#info tbody").empty();
                            //清空原有查询数据
                            $("#info").append(s);
                            if(eval($("#currentPage").val())==1){
                                $("#prePage").attr("disabled","disabled");//第一页添加禁止点击
                            }else{
                                $("#prePage").removeAttr("disabled");
                            }
                            if(data.totalPage==$("#currentPage").val()){
                                $("#nextPage").attr("disabled","disabled");
                            }else{
                                $("#nextPage").removeAttr("disabled");
                            }
                        }
                    })
        }
    </script>
</body>

impl层

public Map<String, Object> pageDel(int currentPage, Integer currentCount) {
        int startPage=(currentPage-1)*currentCount;
        //计算起始行数
        List<User> list = pageList(startPage, currentCount);//mysql查询当前页面数据
        int num = userTotalPage();//计算总用户条数
        int totalPage = (num + currentCount - 1) / currentCount;//计算总页数
        Map<String, Object> map = new HashMap<>();
        map.put("currentPage", currentPage);
        map.put("list", list);
        map.put("totalPage", totalPage);
        return map;//放置map json返回
    }

mapper xml里

<resultMap type="com.huwa.model.User" id="User"></resultMap>
<select id="userTotalPage" resultType="Integer">
        SELECT COUNT(*) FROM t_user
    </select>
<select id="pageList" resultMap="User">
        SELECT * from t_user 
        LIMIT #{startPage},#{currentCount}
    </select>