PageHelper与bootstrap的模态框,以及jquery代码实现分页查询显示以及Echart的使用

模板下载地址:https://files.cnblogs.com/files/han-guang-xue/%E5%88%86%E9%A1%B5%E6%A8%A1%E6%9D%BF.zip

jquery代码

var pn;
var maxPn;
$(function () {
    loading(1);
    $("#add").click(function () {
        $("#addModal").modal();
    });
    //添加模态框,向后台发送请求添加数据并刷新页面
    $("#confirmAdd").click(function () {
        $.post("addUser", $("#addForm").serialize(), function (date) {
            $("#addModal").modal("hide");
            loading(maxPn); //刷新页面
        })
    })
    //修改模态框,向后台发送数据并刷新页面
    $("#confirmUpdate").click(function () {
        $.post("updateUser", $("#updateForm").serialize(), function (date) {
            $("#updateModal").modal("hide");
            loading(pn);
        })
    })
    //Echart的使用,可视化数据的使用
    $("#data").click(function () {
        $.post("data", function (list) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '商城顾客来源分析',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '年龄占比:',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [
                            {value: list[0].value, name: list[0].name},
                            {value: list[1].value, name: list[1].name},
                            {value: list[2].value, name: list[2].name},
                            {value: list[3].value, name: list[3].name},
                            {value: list[4].value, name: list[4].name},
                            {value: list[5].value, name: list[5].name},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $("#drawingModal").modal();
        })
    })
})
//加载数据
function loading(pn) {
    $("tbody").empty();
    $.post("queryAllUser", {"pn": pn}, function (msg) {
        $.each(msg.list, function (index, item) {
            var tr = $("<tr class='data_tr''>" +
                "<td>" + item.uId + "</td>" +
                "<td>" + item.uName + "</td>" +
                "<td>" + item.uTruename + "</td>" +
                "<td>" + item.uPassword + "</td>" +
                "<td>" + item.uAge + "</td>" +
                "<td>" + item.uSex + "</td>" +
                "<td>" + item.uPhone + "</td>" +
                "<td>" + item.uRole + "</td>" +
                "<td>" + item.uStatue + "</td>" +
                "<td>" + item.uNote + "</td>" +
                "<td><a href='#' type=\"button\" class=\"btn btn-info\" data-toggle='modal' data-target='#myModal' onclick='getDetails(" + item.uId + ")'>详情/修改</a>|" +
                "<a href='#' type=\"button\" class=\"btn btn-danger\" onclick='getdel(" + item.uId + ")'>删除</a></td></tr>").appendTo($("tbody"));
        });
        pn = msg.pageNum;
        maxPn = msg.pages;
        loadPaging(msg);
    }, "JSON");
}
//分页的标签
function loadPaging(page) {
    $("#paging").empty();
    var nav = $("<nav class='text-right'></nav>");
    var ul = $("<ul class='pagination'><li><a onclick='loading(1)' aria-label='Previous'> 首页 </a></li>" +
        "<li><a onclick='loading(" + (page.pageNum - 1) + ")' aria-label='Previous'> <span aria-hidden='true'>上一页</span></a></li></ul>").appendTo(nav);
    $.each(page.navigatepageNums, function (index, item) {
        var li = $("<li><a onclick='loading(" + item + ")'>" + item + "</a></li>").appendTo(ul);
        if (page.pageNum == item) {
            li.addClass("active");
        }
    });
    var edit_btn = $("<li><a onclick='loading(" + (page.pageNum + 1) + ")' aria-label='Next'> <span aria-hidden='true'>下一页</span></a></li>" +
        "<li><a onclick='loading(" + page.pages + ")' aria-label='Next'> 末页 </a></li>").appendTo(ul);
    nav.appendTo($("#paging"));
}
//编辑方法,使用编辑模态框
function getDetails(id) {
    $("#updateModal").modal();
    $.post("queryUserById", {"id": id}, function (user) {
        $("#updateForm input[name='uId']").val(id);
        $("#updateForm input[name='uName']").val(user.uName);
        $("#updateForm input[name='uTruename']").val(user.uTruename);
        $("#updateForm input[name='uPassword']").val(user.uPassword);
        $("#updateForm input[name='uAge']").val(user.uAge);
        $("#updateForm input[name='uSex']").val([user.uSex]);
        $("#updateForm input[name='uPhone']").val(user.uPhone);
        $("#updateForm select[name='uRole']").val([user.uRole]);
        $("#updateForm select[name='uStatue']").val([user.uStatue]);
        $("#updateForm textarea[name='uNote']").val(user.uNote);
    }, "JSON")
}
//删除方法,使用删除模态框
function getdel(id) {
    $.post("deleteUser", {"id": id}, function (data) {
        loading(pn);
        $("#promptModal").modal();  //消息提示模态框
        setTimeout("$(\"#promptModal\").modal('hide')", 1000);
    }, "JSON")
}

 

jsp代码:

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/11/9 009
  Time: 17:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="<c:url value="/static/css/headbott.css"/> " type="text/css"/>
    <link rel="stylesheet" href="<c:url value="/static/css/bootstrap.min.css"/>"/>
    <link rel="stylesheet" href="<c:url value="/static/css/dashboard.css"/> "/>
    <script type="text/javascript" src="<c:url value="/static/js/jquery-1.42.min.js" />"></script>
    <script type="text/javascript" src="<c:url value="/static/js/jquery.js"/> "></script>
    <script type="text/javascript" src="<c:url value="/static/js/bootstrap.min.js"/> "></script>
    <script type="text/javascript" src="<c:url value="/static/js/countUp.js"/> "></script>
    <script type="text/javascript" src="<c:url value="/static/js/user.js"/> "></script>
    <script type="text/javascript" src="<c:url value="/static/js/echarts.min.js"/> "></script>
</head>
<body>
<%--======================================================顶部====================================================--%>

<div id="header">
    <div class="heade-con">
        <div class="nav posa">
            <ul>
                <li><a href="jumpMain">个人中心</a></li>
                <li><a class="vcolor" href="jumpUser">用户信息</a></li>
                <li><a href="jumpProduct">商品信息</a></li>
                <li><a href="jumpComment">商品评论</a></li>
            </ul>
        </div>
        <div class="index-login">
            <a href="jumpLogin">${sessionScope.user.uName}</a>
            <a href="jumpExit">退出</a>
        </div>
    </div>
</div>
<%--======================================================顶部====================================================--%>

<%--======================添加模态框=======================--%>
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <div class="form-group">
                        <label class="control-label">姓名:</label>
                        <input type="text" name="uName" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">真实姓名:</label>
                        <input type="text" name="uTruename" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">密码:</label>
                        <input type="text" name="uPassword" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">年龄:</label>
                        <input type="text" name="uAge" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">性别:</label>
                        <input type="text" name="uSex" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">手机号:</label>
                        <input type="text" name="uPhone" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">权限:</label>
                        <select name="uRole" class="form-control">
                            <option value="0">管理员</option>
                            <option value="1">普通用户</option>
                            <option value="2">VIP用户</option>
                            <option value="3">特级用户</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">状态:</label>
                        <select name="uStatue" class="form-control">
                            <option value="1">已激活</option>
                            <option value="0">未激活</option>
                            <option value="-1">已注销</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">备注:</label>
                        <textarea rows="3" type="text" name="uNote" class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="confirmAdd" class="btn btn-primary">确认添加</button>
            </div>
        </div>
    </div>
</div>
<%--======================详情/修改模态框=======================--%>
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">修改用户信息</h4>
            </div>
            <div class="modal-body">
                <form id="updateForm">
                    <input type="hidden" name="uId">
                    <div class="form-group">
                        <label class="control-label">姓名:</label>
                        <input type="text" name="uName" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">真实姓名:</label>
                        <input type="text" name="uTruename" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">密码:</label>
                        <input type="text" name="uPassword" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">年龄:</label>
                        <input type="text" name="uAge" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">性别:</label>
                        <input type="text" name="uSex" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">手机号:</label>
                        <input type="text" name="uPhone" class="form-control">
                    </div>
                    <div class="form-group">
                        <label class="control-label">权限:</label>
                        <select name="uRole" class="form-control">
                            <option value="0">管理员</option>
                            <option value="1">普通用户</option>
                            <option value="2">VIP用户</option>
                            <option value="3">特级用户</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">状态:</label>
                        <select name="uStatue" class="form-control">
                            <option value="1">已激活</option>
                            <option value="0">未激活</option>
                            <option value="-1">已注销</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="control-label">备注:</label>
                        <textarea rows="3" type="text" name="uNote" class="form-control"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" id="confirmUpdate" class="btn btn-primary">确认修改</button>
            </div>
        </div>
    </div>
</div>
<%--==========================删除提示模态框========================--%>
<div id="promptModal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
     aria-labelledby="mySmallModalLabel">
    <div class="modal-dialog modal-sm" role="document">
        <div class="alert btn-success" role="alert">
            删除成功.....(◕ᴗ◕✿)
        </div>
    </div>
</div>
<%--==========================画图模态框===============================--%>
<div id="drawingModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style="width: 800px;height:800px;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div>
</div><!-- /.modal -->

<style>
    body {
        position: relative;
    }

    #promptModal {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .alert {
        text-align: center;
    }

</style>

<%--============================================中部==============================================--%>

<div class="container-fluid">
    <div class="row">
        <!--左侧导航栏end-->
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-1 main">
            <h1 class="page-header">用户信息管理</h1>

            <div class="panel panel-default">
            </div>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="panel-title">
                        <h3>用户信息管理</h3>
                    </div>
                    <div class="btn-group">
                        <a id="add" type="button" class="btn btn-primary col-md-offset-9">添加用户</a>
                        <a id="data" type="button" class="btn btn-warning col-md-offset-5">查看用户年龄分布的数据</a>
                    </div>
                </div>
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr class="active">
                                <th>Uid</th>
                                <th>Name</th>
                                <th>TrueName</th>
                                <th>Password</th>
                                <th>Age</th>
                                <th>Sex</th>
                                <th>Phone</th>
                                <th>Role</th>
                                <th>Statue</th>
                                <th>Note</th>
                                <th>Operation</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                    <div id="paging" class="col-md-6 col-md-offset-4">

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<%--============================================中部==============================================--%>


<div id="bottom">
    <div class="bot-con1">
        <ul>
            <li class="bot-con1-li1">阿里</li>
            <li>阿里巴巴集团<span class="inde-span1"></span></li>
            <li>阿里云计算<span class="inde-span2"></span></li>
            <li>阿里云科技<span class="inde-span3"></span></li>
        </ul>
    </div>
    <div class="bot-con1 bot-con2">
        <ul>
            <li><span class="inde-span4"></span>淘宝网</li>
            <li><span class="inde-span4"></span>全球速卖通</li>
            <li><span class="inde-span5"></span>项目获得支持</li>
            <li><span class="inde-span6"></span>发起人发放回报</li>
            <li><span class="inde-span7"></span>联系我们</li>
        </ul>
    </div>
    <div class="bottom-ggt"><a href=""><img src="<c:url value="/static/imgs/bottbom_68.jpg"/> " alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里旅行</a></li>
            <li><a href="">阿里云计算</a></li>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

        <a href=" ">关于淘宝</a>
        <a href=" ">合作伙伴</a>
        <a href=" ">营销中心</a>
        <a href=" ">廉正举报</a>
        <a href=" ">联系客服</a>
        <a href=" ">开放平台</a>
        <a href=" ">诚征英才</a>
        <a href=" ">联系我们</a>
        <a href=" ">网站地图</a>
        <a href=" ">法律声明</a>　　　
        <em>© 2003-2015 Taobao.com 版权所有</em><br>

        <br>
        <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span>
        <b>|</b>
        <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span>
        <b>|</b>
        <span>信息网络传播视听节目许可证：1109364号</span>
        <b>|</b>
        <span>举报电话:0571-81683755</span>
    </div>
</div>
</body>
</html>

后台代码:

//查询所有
    @RequestMapping("queryAllUser")
    @ResponseBody
    public PageInfo<User> queryAll(@RequestParam(defaultValue = "1")Integer pn){
        PageHelper.startPage(pn,6);
        List<User> list = userService.queryAll();
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }