标准Json页面展示---分页---下拉框---遍历---翻页

最新推荐文章于 2023-04-20 15:16:52 发布

置顶李府二公子

最新推荐文章于 2023-04-20 15:16:52 发布

阅读量308

点赞数

分类专栏：常用工具类

本文链接：https://blog.csdn.net/C_N_D_N_/article/details/101778590

版权

常用工具类专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>首页</title>
    <script src="static/js/jquery-3.4.1.js"></script>
    <style type="text/css">
        *{
            margin: 0;
        }
        body{
            width: 960px;
            margin: 0 auto;
        }
        header{
            width: 320px;
            margin: 0 auto;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        header button{
            margin-left: 5px;
        }
        h2{
            border: 2px solid #A5A5A5;
            border-bottom: none;
            text-align: center;
            font-family: "宋体";
            padding: 10px 0;
        }
        table{
            border-collapse: collapse;
            width: 100%;
        }
        th{
            height: 30px;
            background-color: dimgray;
        }
        table, td, th{
            border: 2px solid #A5A5A5;
        }
        td{
            text-align: center;
        }
        a{
            margin: 0 5px;
        }
        #div-section-second{
            padding: 10px 0;
            text-align: right;
        }
        .p-style{
            text-align: center;
            color: red;
            border: 2px solid #b448fe;
            border-top: none;
            padding: 5px 0;
        }
    </style>
</head>
<body>

<header>
    <span>图书分类：</span>
    <select name='department' id="category">
        <!--<option value='5' selected>全部</option>-->
    </select>
    <button type='button' id="query">查询</button><button type='button'id="add">新增电子图书</button>
</header>
<section>
    <div>
        <h2>电子图书列表</h2>
    </div>
    <table>
        <tr><th>图书编号</th><th>图书名称</th><th>图书摘要</th><th>上传人</th><th>上传时间</th><th>操作</th></tr>
        <!--<tr><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td><td>xxx</td></tr>-->
    </table>
    <div id='div-section-second'>
        <!--<a href='#'>首页</a><a href='#'>上一页</a><a href='#'>下一页</a><a href='#'>末页</a>第<span id='pageNo'>1</span>页/第<span id='totalPageCount'>1</span>页-->
    </div>
</section>
<input type="hidden" value="1" id="currentPageNo">
<input type="hidden" value="5" id="categoryId">
<script type="text/javascript" src="static/js/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {

    var countPage;
    function initShow() {
        var currentPageNo=$("#currentPageNo").val();                    // 分页   隐藏域的值
        var categoryId=$("#categoryId").val();									// 分类   隐藏域的值
        var params="currentPageNo="+currentPageNo+"&categoryId="+categoryId+"&opr=initShow";
        $.getJSON("/ebookEntryServlet",params,getEbookInfo)
        function getEbookInfo(data) {
            var categoryId=$("#categoryId").val();		//分类   隐藏域的值
            countPage=data.countPageNo;				//总页数
            // 下拉框   分类
            $("#category").html("");
            for(var i=0;i<data.listCategory.length;i++){
                if(data.listCategory[i].id==parseInt(categoryId)){
                    $("#category").append("<option selected value='"+data.listCategory[i].id+"'>"+data.listCategory[i].name+"</option>");
                }else {
                    $("#category").append("<option value='"+data.listCategory[i].id+"'>"+data.listCategory[i].name+"</option>");
                }
            }

            //图书信息
            $("tr:gt(0)").remove();
            for(var i=0;i<data.list.length;i++){
                var $str=$("<tr id='delTr"+data.list[i].id+"'></tr>");
                $("section>table").append($str)
                $str.append("<td>"+data.list[i].id+"</td>")
                    .append("<td>"+data.list[i].title+"</td>")
                    .append("<td>"+data.list[i].summary+"</td>")
                    .append("<td>"+data.list[i].uploaduser+"</td>")
                    .append("<td>"+data.list[i].createDate+"</td>")
                    .append("<td><a href='update.html?entryId="+data.list[i].id+"'>修改</a>" +
                        "<a href='#' id='del"+data.list[i].id+"' del='"+data.list[i].id+"'>删除</a></td>");
            }

            //显示  上一页  下一页
            // 清空上一页、下一页等标签
            $("#pageSpan").html(" ");
            if(data.pageNo>1){
                $("#pageSpan").append("<a href='#' id='firstPage'>首页</a><a href='#' id='prePage'>上一页</a>")
            }
            if(data.pageNo<data.countPage){
                $("#pageSpan").append("<a href='#' id='nextPage'>下一页</a><a href='#' id='lastPage'>末页</a>")
            }
            $("#pageSpan").append("第<span>"+data.pageNo+"</span>页/第<span>"+data.countPage+"</span>页")

        }//end of getEbookInfo() 回调
    }//end of initShow() 初始化加载
    initShow();

    //首页 上一页 下一页 末页
    $(document).on("click","#firstPage,#prePage,#nextPage,#lastPage",function () {
        var id2=$(this).attr("id");
        switch (id2){
            case "firstPage":
                $("#currentPageNo").val(1);
                break;
            case "prePage":
                var currentPageNo=$("#currentPageNo").val();
                var pageNo=parseInt(currentPageNo)-1;
                $("#currentPageNo").val(pageNo);
                break;
            case "nextPage":
                var currentPageNo=$("#currentPageNo").val();
                var pageNo=parseInt(currentPageNo)+1;
                $("#currentPageNo").val(pageNo);
                break;
            case "lastPage":
                $("#currentPageNo").val(countPage);
                break;
        }
        initShow();
    })

    //点击查询
    $("#query").click(function () {             //维护当前页   和   下拉框 分类id的值
        $("#currentPageNo").val(1);             //隐藏域的值
        var category=$("#category").val();      //将下拉框的值放进隐藏域  维护隐藏域的值
        $("#categoryId").val(category);
        initShow();
    })
    //点击增加
    $("#add").click(function () {
        window.location.href="add.html";
    })
    //点击删除
    $(document).on("click","[id*=del]",function () {
        if(confirm("是否删除?")) {
            var delId = $(this).attr("del");
            console.log("delId=========="+delId)
            $.getJSON("/ebookEntryServlet","delId="+delId+"&opr=delId",successDel)

            function successDel(data) {
                if (data.toString() == "true") {
                    alert("删除成功")
                    $("#delTr"+delId).remove()
                    window.location.href = "http://localhost:8080/index.html";
                }
                else {
                    alert("删除失败")
                    window.location.href = "http://localhost:8080/index.html";
                }
            }
        }
    })
})
</script>
</body>
</html>

二维数组的遍历，集合里面有两个集合

// 遍历  信息
                $("tr:gt(0)").remove();
                for (var i = 0;i < data[0].length;i++){
                    var $str=$("<tr id='ddd"+data[0][i].id+"'></tr>");
                    $( "table").append($str);
                    $str.append('<td>'+data[0][i].id+'</td>')
                        .append('<td>'+data[0][i].name+'</td>')
                        .append('<td>'+data[0][i].passWord+'</td>')
                        .append('<td><img src="../static/images/'+data[0][i].idPicture+'" alt=""></td>')
                        .append('<td><img src="../static/images/'+data[0][i].picture+'" alt=""></td>')
                        .append('<td>'+data[0][i].createDate+'</td>')
                        .append('<td><a href="#" id="del'+data[0][i].id+'" del="'+data[0][i].id+'">删除</a>' +
                            '<a href="/update?id='+data[0][i].id+'">修改</a>' +
                            '<a href="/add">增加</a></td>');
                }

//单引号的map遍历

// 遍历  信息
            $("tr:gt(0)").remove();
            for (var i = 0;i < data.fenList.length;i++){
                var $str=$("<tr id='ddd"+data.fenList[i].id+"'></tr>");
                $( "table").append($str);
                $str.append('<td>'+data.fenList[i].book_id+'</td>')
                    .append('<td>'+data.fenList[i].book_type+'</td>')
                    .append('<td>'+data.fenList[i].book_name+'</td>')
                    .append('<td>'+data.fenList[i].book_author+'</td>')
                    .append('<td>'+data.fenList[i].publish_press+'</td>')
                    if(data.fenList[i].is_borrow ===1){
                        $str.append('<td>未借阅</td>')
                    }else if(data.fenList[i].is_borrow ===2){
                        $str.append('<td>已借阅</td>')
                    }
            }

跳页（123456789）

//12345678910
            $("#paging").html(" ");
            var pageNo=data.pageNo;
            var countPage=data.countPage;
            if(countPage<10){
                for(i=1;i<=countPage;i++){
                    $("#paging").append("<a href='javascript:;'>"+i+"</a>")
                }
            }else {
                if (pageNo < 6) {
                    for (i = 1; i <= 10; i++) {
                        $("#paging").append("<a href='javascript:;'>" + i + "</a>")
                    }
                } else if (pageNo <= countPage - 4) {
                    for (i = countPage - 5; i < countPage + 5; i++) {
                        $("#paging").append("<a href='javascript:;'>" + i + "</a>")
                    }
                } else {
                    for (i = countPage - 9; i < countPage; i++) {
                        $("#paging").append("<a href='javascript:;'>" + i + "</a>")
                    }
                }
            }

//跳页
    $(document).on("click","#paging a",function () {
        var paging = $(this).html()；
        $("#pageNo").val(parseInt(paging));
        show();
    })