JQuery实现分页查询

最新推荐文章于 2022-07-27 22:02:45 发布

穆呈祥

最新推荐文章于 2022-07-27 22:02:45 发布

阅读量2.2k

点赞数

文章标签： jquery 分页查询

本文链接：https://blog.csdn.net/qq_34265010/article/details/82729695

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分页查询</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
    <script type="text/javascript">
    $(function(){
        $.ajax({
            type:"post",
            url:"getJsonLen.do",
            success:function(data){
                $("#maxPages").val(data);
            },
            error:function(){
                alert("网络错误，请稍后再试");
            }
        });
        queryData(1);
    });
        /**
         * 根据选择执行对应的代码
         * @param select
         */
        function queryDataSelect(select){
            var currentPage=parseInt($("#currentPage").val());
            switch (select){
                case 1:
                        queryData(1);
                    break;
                case 2:
                        var queryPageVal=currentPage-1;
                        if (queryPageVal<1){
                            alert("已经是第一页了");
                        }else{
                            queryData(queryPageVal);
                        }
                    break;
                case 3:
                    var queryPageVal=currentPage+1;
                        if (queryPageVal>$("#maxPages").val()){
                            alert("这已经是最后一页了")
                        }else {
                            queryData(queryPageVal);
                        }
                    break;
                case 4:
                        var queryPageVal=$("#maxPages").val();
                       queryData(queryPageVal);
                    break;
            }

        }
        /**
         * 查询一页用户的信息
         * @param pageNum
         */
        function queryData(pageNum){
            $.ajax({
                type:"post",
                url:"queryData.do",
                data:{
                    "pageNum":pageNum
                },
                success:function(data){
                        var tableContent="<tr></te><td>名字</td><td>姓名</td></tr>";
                        $.each(data,function(index,item){
                            tableContent+= "<tr><td>"+item.name+"</td><td>"+item.age+"</td></tr>";
                        });
                        $("#userTable").html(tableContent);
                        $("#currentPage").val(pageNum);
                },
                error:function(){
                    alert("网络错误，请稍后再试");
                }
            });
        }
    </script>
</head>
<body>
<div align="center">
    <table id="userTable"></table>
    <div>
        <a href="#" onclick="queryDataSelect(1);">首页</a>
        <a href="#" onclick="queryDataSelect(2);">上一页</a>
        <a href="#" onclick="queryDataSelect(3);">下一页</a>
        <a href="#" onclick="queryDataSelect(4);">尾页</a>
    </div>
    <div>
        <input type="hidden" id="currentPage" value="1"/>
        <input type="hidden" id="maxPages"/>
    </div>
</div>
</body>
</html>

穆呈祥

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现分页查询

&lt;!DOCTYPE html&gt;&lt;html lang="zh-CN"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;分页查询&lt;/title&gt;&lt;script type="text/javascript" src="js/jquer
复制链接

扫一扫