溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

spingboot+thymeleaf+ajax分頁(yè)寫(xiě)法做個(gè)筆記

發(fā)布時(shí)間:2020-08-11 00:04:19 來(lái)源:網(wǎng)絡(luò) 閱讀:1284 作者:知止內(nèi)明 欄目:編程語(yǔ)言

效果

spingboot+thymeleaf+ajax分頁(yè)寫(xiě)法做個(gè)筆記
spingboot+thymeleaf+ajax分頁(yè)寫(xiě)法做個(gè)筆記

后端代碼

分頁(yè)配置

 /**
     * 目的防止駝峰命名規(guī)則
     * @return
     */
    @Bean
    public ConfigurationCustomizer configurationCustomizer(){
        return new ConfigurationCustomizer(){
            @Override
            public void customize(Configuration configuration) {
                configuration.setMapUnderscoreToCamelCase(true);
            }
        };
    }

    /**
     * 使用方法直接調(diào)用這個(gè)就行
     *  PageHelper.startPage(1, 10);
     *  System.out.println("MyBatisConfiguration.pageHelper()");
     * 分頁(yè)插件
     * @return
     */
    @Bean
    public PageHelper pageHelper() {
        PageHelper pageHelper = new PageHelper();
        Properties p = new Properties();
        p.setProperty("offsetAsPageNum", "true");
        p.setProperty("rowBoundsWithCount", "true");
        p.setProperty("reasonable", "true");
        pageHelper.setProperties(p);
        return pageHelper;
    }

controler

/**
     * 查詢報(bào)表全部數(shù)據(jù)(分頁(yè)查詢)
     *
     * @return
     */
    @GetMapping("/resultList")
    @ResponseBody
    public Msg getEmps(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
        // 引入PageHelper分頁(yè)插件
        // 在查詢之前只需要調(diào)用,傳入頁(yè)碼,以及每頁(yè)的大小
        PageHelper.startPage(pn, 5);
        // startPage后面緊跟的這個(gè)查詢就是一個(gè)分頁(yè)查詢
//        List<TestResult> emps = reportTotalService.findAll();
        List<ReportUi> emps = reportTotalService.findreprt();

        // 使用pageInfo包裝查詢后的結(jié)果,只需要將pageInfo交給頁(yè)面就行了。
        // 封裝了詳細(xì)的分頁(yè)信息,包括有我們查詢出來(lái)的數(shù)據(jù),傳入連續(xù)顯示的頁(yè)數(shù)
        PageInfo page = new PageInfo(emps, 5);

        return Msg.success().add("pageInfo", page);
    }

前端代碼

公共代碼

<html xmlns:th="http://www.thymeleaf.org">

<!--上面頭信息-->
<head th:fragment="header">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>報(bào)告展示</title>

    <!-- Bootstrap -->
    <link th:href="@{/static/bootstrap/vendors/bootstrap/dist/css/bootstrap.min.css}"
          href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link th:href="@{/static/bootstrap/vendors/font-awesome/css/font-awesome.min.css}"
          href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link th:href="@{/static/bootstrap/vendors/nprogress/nprogress.css}" href="../vendors/nprogress/nprogress.css"
          rel="stylesheet">
    <!-- iCheck -->
    <link th:href="@{/static/bootstrap/vendors/iCheck/skins/flat/green.css}"
          href="../vendors/iCheck/skins/flat/green.css"
          rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link th:href="@{/static/bootstrap/vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css}"
          href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link th:href="@{/static/bootstrap/vendors/jqvmap/dist/jqvmap.min.css}" href="../vendors/jqvmap/dist/jqvmap.min.css"
          rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link th:href="@{/static/bootstrap/vendors/bootstrap-daterangepicker/daterangepicker.css}"
          href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link th:href="@{/static/bootstrap/build/css/custom.min.css}" href="../build/css/custom.min.css" rel="stylesheet">

<!--    <script type="text/javascript"-->
<!--            th:src="@{/static/js/jquery-1.12.4.min.js}"></script>-->
</head>

<footer th:fragment="footer">
    <div class="pull-right">
        Admin<a  target="_blank" title="接口測(cè)試">接口測(cè)試實(shí)驗(yàn)地</a> - Collect from <a
             title="接口測(cè)試" target="_blank">接口測(cè)試部</a>
    </div>
    <div class="clearfix"></div>
</footer>

<!--下面信息-->
<div th:fragment="jsinfo">
    <!-- jQuery -->
    <script th:src="@{/static/bootstrap/vendors/jquery/dist/jquery.min.js}"
            src="../bootstrap/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script th:src="@{/static/bootstrap/vendors/bootstrap/dist/js/bootstrap.min.js}"
            src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- FastClick -->
    <script th:src="@{/static/bootstrap/vendors/fastclick/lib/fastclick.js}"
            src="../vendors/fastclick/lib/fastclick.js"></script>
    <!-- NProgress -->
    <script th:src="@{/static/bootstrap/vendors/nprogress/nprogress.js}"
            src="../vendors/nprogress/nprogress.js"></script>
    <!-- Chart.js -->
    <script th:src="@{/static/bootstrap/vendors/Chart.js/dist/Chart.min.js}"
            src="../vendors/Chart.js/dist/Chart.min.js"></script>
    <!-- gauge.js -->
    <script th:src="@{/static/bootstrap/vendors/gauge.js/dist/gauge.min.js}"
            src="../vendors/gauge.js/dist/gauge.min.js"></script>
    <!-- bootstrap-progressbar -->
    <script th:src="@{/static/bootstrap/vendors/bootstrap-progressbar/bootstrap-progressbar.min.js}"
            src="../vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
    <!-- iCheck -->
    <script th:src="@{/static/bootstrap/vendors/iCheck/icheck.min.js}" src="../vendors/iCheck/icheck.min.js"></script>
    <!-- Skycons -->
    <script th:src="@{/static/bootstrap/vendors/skycons/skycons.js}" src="../vendors/skycons/skycons.js"></script>
    <!-- Flot -->
    <script th:src="@{/static/bootstrap/vendors/Flot/jquery.flot.js}" src="../vendors/Flot/jquery.flot.js"></script>
    <script th:src="@{/static/bootstrap/vendors/Flot/jquery.flot.pie.js}"
            src="../vendors/Flot/jquery.flot.pie.js"></script>
    <script th:src="@{/static/bootstrap/vendors/Flot/jquery.flot.time.js}"
            src="../vendors/Flot/jquery.flot.time.js"></script>
    <script th:src="@{/static/bootstrap/vendors/Flot/jquery.flot.stack.js}"
            src="../vendors/Flot/jquery.flot.stack.js"></script>
    <script th:src="@{/static/bootstrap/vendors/Flot/jquery.flot.resize.js}"
            src="../vendors/Flot/jquery.flot.resize.js"></script>
    <!-- Flot plugins -->
    <script th:src="@{/static/bootstrap/vendors/flot.orderbars/js/jquery.flot.orderBars.js}"
            src="../vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
    <script th:src="@{/static/bootstrap/vendors/flot-spline/js/jquery.flot.spline.min.js}"
            src="../vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
    <script th:src="@{/static/bootstrap/vendors/flot.curvedlines/curvedLines.js}"
            src="../vendors/flot.curvedlines/curvedLines.js"></script>
    <!-- DateJS -->
    <script th:src="@{/static/bootstrap/vendors/DateJS/build/date.js}" src="../vendors/DateJS/build/date.js"></script>
    <!-- JQVMap -->
    <script th:src="@{/static/bootstrap/vendors/jqvmap/dist/jquery.vmap.js}"
            src="../vendors/jqvmap/dist/jquery.vmap.js"></script>
    <script th:src="@{/static/bootstrap/vendors/jqvmap/dist/maps/jquery.vmap.world.js}"
            src="../vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
    <script th:src="@{/static/bootstrap/vendors/jqvmap/examples/js/jquery.vmap.sampledata.js}"
            src="../vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
    <!-- bootstrap-daterangepicker -->
    <script th:src="@{/static/bootstrap/vendors/moment/min/moment.min.js}"
            src="../vendors/moment/min/moment.min.js"></script>
    <script th:src="@{/static/bootstrap/vendors/bootstrap-daterangepicker/daterangepicker.js}"
            src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>

    <!-- Custom Theme Scripts -->
    <script th:src="@{/static/bootstrap/build/js/custom.min.js}" src="../build/js/custom.min.js"></script>
    <script th:src="@{/static/js/commons.js}" src="../build/js/custom.min.js"></script>
    <script th:src="@{/static/js/highcharts.js}" src="../build/js/custom.min.js"></script>

</div>

<!--左側(cè)欄-->
<div class="col-md-3 left_col" th:fragment="topbar">
    <div class="left_col scroll-view">
        <div class="navbar nav_title" >
            <a th:href="@{/}" href="#" class="site_title"><i class="fa fa-paw"></i> <span>報(bào)告展示平臺(tái)</span></a>
        </div>
        <div class="clearfix"></div>
        <!-- menu profile quick info -->
        <div class="profile clearfix">
            <div class="profile_pic">
                <img th:src="@{/static/images/img.jpg}" src="../../static/images/img.jpg" alt="..."
                     class="img-circle profile_img">
            </div>
            <div class="profile_info">
                <span>Welcome,</span>
                <h3>admin</h3>
            </div>
        </div>
        <!-- /menu profile quick info -->
        <br/>
        <!-- sidebar menu -->
        <!--引入側(cè)邊欄-->

        <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
            <div class="menu_section">
                <h4>General</h4>
                <ul class="nav side-menu">
                    <li><a><i class="fa fa-edit"></i> 接口區(qū) <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="#">項(xiàng)目管理</a></li>
                            <!--                            <li><a th:href="@{/project_list.html}">項(xiàng)目管理</a></li>-->
                            <!--                            <li><a th:href="@{/module_list}">模塊管理</a></li>-->
                            <!--                            <li><a th:href="@{/interInfo_list}">接口管理</a></li>-->
                            <!--                            <li><a th:href="@{/test_list}">用例管理</a></li>-->
                            <!--                            <li><a th:href="@{/config_list}">配置管理</a></li>-->
                        </ul>
                    </li>
                    <li><a><i class="fa fa-institution"></i> UI自動(dòng)化區(qū) <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="#">應(yīng)用管理</a></li>
                            <li><a href="#">模塊管理</a></li>
                            <li><a href="#">接口管理</a></li>
                            <li><a href="#">用例管理</a></li>
                            <li><a href="#">配置管理</a></li>
                        </ul>
                    </li>
                    <li><a><i class="fa fa-building-o"></i> 專項(xiàng)區(qū) <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="#">應(yīng)用管理</a></li>
                            <li><a href="#">模塊管理</a></li>
                            <li><a href="#">接口管理</a></li>
                            <li><a href="#">用例管理</a></li>
                            <li><a href="#">配置管理</a></li>
                        </ul>
                    </li>
                    <li><a><i class="fa fa-wrench"></i> 性能測(cè)試區(qū) <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="#">應(yīng)用管理</a></li>
                            <li><a href="#">模塊管理</a></li>
                            <li><a href="#">接口管理</a></li>
                            <li><a href="#">用例管理</a></li>
                            <li><a href="#">配置管理</a></li>
                        </ul>
                    </li>
                    <li><a><i class="fa fa-desktop"></i> 任務(wù)管理 <span class="fa fa-chevron-down"></span></a>
                        <ul class="nav child_menu">
                            <li><a href="#">定時(shí)任務(wù)</a></li>
                            <li><a href="#">郵件設(shè)置</a></li>
                            <li><a href="#">任務(wù)監(jiān)控</a></li>
                            <li><a href="#">查看報(bào)告</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <!-- /sidebar menu -->
        <!-- /menu footer buttons -->
        <div class="sidebar-footer hidden-small">
            <a data-toggle="tooltip" data-placement="top" title="Settings">
                <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Lock">
                <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
            </a>
            <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
                <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
            </a>
        </div>
        <!-- /menu footer buttons -->
    </div>
</div>
<!-- top navigation -->
<div class="top_nav" id="sidebar">
    <div class="nav_menu">
        <nav>
            <div class="nav toggle">
                <a id="menu_toggle"><i class="fa fa-bars"></i></a>
            </div>

            <ul class="nav navbar-nav navbar-right">
                <li class="">
                    <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
                       aria-expanded="false">
                        <img th:src="@{/static/images/img.jpg}" src="../../static/images/img.jpg" alt="">John Doe
                        <span class=" fa fa-angle-down"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-usermenu pull-right">
                        <li><a href="javascript:;"> Profile</a></li>
                        <li>
                            <a href="javascript:;">
                                <span class="badge bg-red pull-right">50%</span>
                                <span>Settings</span>
                            </a>
                        </li>
                        <li><a href="javascript:;">Help</a></li>
                        <li><a href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a></li>
                    </ul>
                </li>

                <li role="presentation" class="dropdown">
                    <a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown"
                       aria-expanded="false">
                        <i class="fa fa-envelope-o"></i>
                        <span class="badge bg-green">6</span>
                    </a>
                    <ul id="menu1" class="dropdown-menu list-unstyled msg_list" role="menu">
                        <li>
                            <a>
                                <span class="image"><img th:src="@{/static/images/img.jpg}"
                                                         src="../../static/images/img.jpg"
                                                         alt="Profile Image"/></span>
                                <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span class="image"><img th:src="@{/static/images/img.jpg}"
                                                         src="../../static/images/img.jpg"
                                                         alt="Profile Image"/></span>
                                <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span class="image"><img th:src="@{/static/images/img.jpg}"
                                                         src="../../static/images/img.jpg"
                                                         alt="Profile Image"/></span>
                                <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span class="image"><img th:src="@{/static/images/img.jpg}"
                                                         src="../../static/images/img.jpg"
                                                         alt="Profile Image"/></span>
                                <span>
                          <span>John Smith</span>
                          <span class="time">3 mins ago</span>
                        </span>
                                <span class="message">
                          Film festivals used to be do-or-die moments for movie makers. They were where...
                        </span>
                            </a>
                        </li>
                        <li>
                            <div class="text-center">
                                <a>
                                    <strong>See All Alerts</strong>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</div>
<!-- /top navigation -->

頁(yè)碼展示代碼


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<head th:replace="commons/include::header">
</head>
<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!--topbar-->
        <div th:replace="commons/include::topbar"></div>
        <!-- top navigation -->
        <div th:replace="commons/include::#sidebar"></div>
        <!-- page content -->
        <div class="right_col" role="main">
            <!-- top tiles -->
            <div class="row tile_count">
                <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-user"></i> 項(xiàng)目總計(jì)</span>
                    <div class="count">2500</div>
                    <span class="count_bottom"><i class="green">4% </i> From last Week</span>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-clock-o"></i> 模塊總計(jì)</span>
                    <div class="count">123.50</div>
                    <span class="count_bottom"><i class="green"><i
                            class="fa fa-sort-asc"></i>3% </i> From last Week</span>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-user"></i> 接口總計(jì)</span>
                    <div class="count green">2,500</div>
                    <span class="count_bottom"><i class="green"><i
                            class="fa fa-sort-asc"></i>34% </i> From last Week</span>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-user"></i> 用例總計(jì)</span>
                    <div class="count">4,567</div>
                    <span class="count_bottom"><i class="red"><i
                            class="fa fa-sort-desc"></i>12% </i> From last Week</span>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-user"></i> 配置總計(jì)</span>
                    <div class="count">2,315</div>
                    <span class="count_bottom"><i class="green"><i
                            class="fa fa-sort-asc"></i>34% </i> From last Week</span>
                </div>
                <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
                    <span class="count_top"><i class="fa fa-user"></i> 今日新增用例</span>
                    <div class="count">7,325</div>
                    <span class="count_bottom"><i class="green"><i
                            class="fa fa-sort-asc"></i>34% </i> From last Week</span>
                </div>
            </div>
            <!-- /top tiles -->

            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="dashboard_graph">

                        <div class="row x_title">
                            <div class="col-md-6">
                                <h4>日常自動(dòng)化數(shù)據(jù)結(jié)果展示 </h4>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <h3>UI每日巡檢 <small>在線</small></h3>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                               aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Settings 1</a>
                                                </li>
                                                <li><a href="#">Settings 2</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <!--                                    <canvas id="ChartUI"></canvas>-->
                                    <div id="ChartUI" ></div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <div class="x_panel">
                                <div class="x_title">
                                    <h3>接口每日巡檢 <small>在線</small></h3>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                               aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                            <ul class="dropdown-menu" role="menu">
                                                <li><a href="#">Settings 1</a>
                                                </li>
                                                <li><a href="#">Settings 2</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <!--                                    <canvas id="ChartUI"></canvas>-->
                                    <div id="container" ></div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <br/>

                    <div class="row">

                        <div class="col-md-12 col-sm-12 col-xs-12">
                            <div class="x_content">
                                <div class="table-responsive">
                                    <table class="table table-striped jambo_table bulk_action" id="res_table">
                                        <thead>
                                        <tr class="headings">
                                            <th>
                                                <input type="checkbox" id="check-all" class="flat">
                                            </th>
                                            <th class="column-title">序號(hào)</th>
                                            <th class="column-title">測(cè)試人員</th>
                                            <th class="column-title">開(kāi)始時(shí)間</th>
                                            <th class="column-title">結(jié)束時(shí)間</th>
                                            <th class="column-title">運(yùn)行版本</th>
                                            <th class="column-title">系統(tǒng)版本</th>
                                            <th class="column-title">回歸類型</th>
                                            <th class="column-title">成功數(shù)</th>
                                            <th class="column-title">失敗數(shù)</th>
                                            <th class="column-title">跳過(guò)數(shù)</th>
                                            <th class="column-title">運(yùn)行用例類名字</th>
                                            <th class="column-title">狀態(tài)</th>
                                            <th class="column-title">用例描述</th>
                                            <th class="column-title">持續(xù)時(shí)間</th>
                                            <th class="column-title">日志</th>
                                            <th class="bulk-actions" colspan="7">
                                                <a class="antoo" >當(dāng)前選擇 ( <span
                                                        class="action-cnt"> </span> ) <i class="fa fa-chevron-down"></i></a>
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>

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

                    <!-- 顯示分頁(yè)信息 -->
                    <div class="row">
                        <!--分頁(yè)文字信息  -->
                        <div class="col-md-6" id="page_info_area"></div>
                        <!-- 分頁(yè)條信息 -->
                        <div class="col-md-6" id="page_nav_area">

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

            </div>
            <!-- /page content -->

            <!-- footer content -->
            <div th:replace="commons/include::footer"></div>
            <!-- /footer content -->
        </div>
    </div>
    <!--js 信息 -->
    <div th:replace="commons/include :: jsinfo"></div>
    <script type="text/javascript">

        /**
         * 時(shí)間對(duì)象的格式化
         */
        Date.prototype.format = function (format) {
            /*
            * format="yyyy-MM-dd hh:mm:ss";
            */
            var o = {
                "M+": this.getMonth() + 1,
                "d+": this.getDate(),
                "h+": this.getHours(),
                "m+": this.getMinutes(),
                "s+": this.getSeconds(),
                "q+": Math.floor((this.getMonth() + 3) / 3),
                "S": this.getMilliseconds()
            };

            if (/(y+)/.test(format)) {
                format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4
                    - RegExp.$1.length));
            }

            for (var k in o) {
                if (new RegExp("(" + k + ")").test(format)) {
                    format = format.replace(RegExp.$1, RegExp.$1.length == 1
                        ? o[k]
                        : ("00" + o[k]).substr(("" + o[k]).length));
                }
            }
            return format;
        };

        function getLocalTime(nS) {
            return new Date(parseInt(nS) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
        }

        var totalRecord, currentPage;
        //1、頁(yè)面加載完成以后,直接去發(fā)送ajax請(qǐng)求,要到分頁(yè)數(shù)據(jù)
        // console.log("這里!totalRecord!");
        $(function () {
            to_page(1);
            //接口
            init_morris_charts();
            //UI
            init_morric_UI();
        });

        function to_page(pn) {
            $.ajax({
                url: "/resultList",
                async: true,
                data: "pn=" + pn,
                type: "GET",
                success: function (result) {
                    //console.log(result);
                    //1、解析并顯示報(bào)表數(shù)據(jù)
                    build_emps_table(result);
                    // //2、解析并顯示分頁(yè)信息
                    build_page_info(result);
                    // //3、解析顯示分頁(yè)條數(shù)據(jù)
                    build_page_nav(result);
                }
            });
        }

        function build_emps_table(result) {
            // console.log(result);
            $("#res_table tbody").empty();
            var emps = result.extend.pageInfo.list;
            $.each(emps, function (index, reulst) {
                var table_re = $("  <td class=\"a-center \">\n" +
                    "  <input type=\"checkbox\" class=\"flat\" name=\"table_records\">\n" +
                    "                                    </td>").append("");
                var empIdTd = $("<td></td>").append(reulst.id);
                var testUser = $("<td></td>").append(reulst.testUser);
                var startTime = $("<td></td>").append(Date.parse(reulst.startTime).format("yyyy-MM-dd hh:mm:ss"));
                var endTime = $("<td></td>").append(Date.parse(reulst.endTime).format("yyyy-MM-dd hh:mm:ss"));
                // var endTime = $("<td></td>").append(getLocalTime(reulst.endTime));
                // var endTime = $("<td></td>").append(date("Y-m-d H:i:s",reulst.endTime));
                var runVersion = $("<td></td>").append(reulst.runVersion);
                var sysVersion = $("<td></td>").append(reulst.sysVersion);
                var typeInfo = $("<td></td>").append(reulst.typeInfo);
                var success = $("<td></td>").append(reulst.success);
                var failed = $("<td></td>").append(reulst.failed);
                var skipped = $("<td></td>").append(reulst.skipped);
                var runMethodName = $("<td></td>").append(reulst.runMethodName);
                var status = $("<td></td>").append(reulst.status);
                var descriptionInfo = $("<td></td>").append(reulst.descriptionInfo);
                var duration = $("<td></td>").append(reulst.duration);
                var detail = $("<td></td>").append(reulst.detail);

                //append方法執(zhí)行完成以后還是返回原來(lái)的元素
                $("<tr></tr>")
                    .append(table_re)
                    .append(empIdTd)
                    .append(testUser)
                    .append(startTime)
                    .append(endTime)
                    .append(runVersion)
                    .append(sysVersion)
                    .append(typeInfo)
                    .append(success)
                    .append(failed)
                    .append(skipped)
                    .append(runMethodName)
                    .append(status)
                    .append(descriptionInfo)
                    .append(duration)
                    .append(detail)
                    .appendTo("#res_table tbody");
            });
        }

        function build_page_info(result) {
            $("#page_info_area").empty();
            $("#page_info_area").append("當(dāng)前" + result.extend.pageInfo.pageNum + "頁(yè),總" +
                result.extend.pageInfo.pages + "頁(yè),總" +
                result.extend.pageInfo.total + "條記錄");
            totalRecord = result.extend.pageInfo.total;
            currentPage = result.extend.pageInfo.pageNum;
        }

        function build_page_nav(result) {
            //page_nav_area
            $("#page_nav_area").empty();
            var ul = $("<ul></ul>").addClass("pagination");

            //構(gòu)建元素
            var firstPageLi = $("<li></li>").append($("<a></a>").append("首頁(yè)").attr("href", "#"));
            var prePageLi = $("<li></li>").append($("<a></a>").append("?"));
            if (result.extend.pageInfo.hasPreviousPage == false) {
                firstPageLi.addClass("disabled");
                prePageLi.addClass("disabled");
            } else {
                //為元素添加點(diǎn)擊翻頁(yè)的事件
                firstPageLi.click(function () {
                    to_page(1);
                });
                prePageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum - 1);
                });
            }

            var nextPageLi = $("<li></li>").append($("<a></a>").append("?"));
            var lastPageLi = $("<li></li>").append($("<a></a>").append("末頁(yè)").attr("href", "#"));
            if (result.extend.pageInfo.hasNextPage == false) {
                nextPageLi.addClass("disabled");
                lastPageLi.addClass("disabled");
            } else {
                nextPageLi.click(function () {
                    to_page(result.extend.pageInfo.pageNum + 1);
                });
                lastPageLi.click(function () {
                    to_page(result.extend.pageInfo.pages);
                });
            }

            //添加首頁(yè)和前一頁(yè) 的提示
            ul.append(firstPageLi).append(prePageLi);
            //1,2,3遍歷給ul中添加頁(yè)碼提示
            $.each(result.extend.pageInfo.navigatepageNums, function (index, item) {

                var numLi = $("<li></li>").append($("<a></a>").append(item));
                if (result.extend.pageInfo.pageNum == item) {
                    numLi.addClass("active");
                }
                numLi.click(function () {
                    to_page(item);
                });
                ul.append(numLi);
            });
            //添加下一頁(yè)和末頁(yè) 的提示
            ul.append(nextPageLi).append(lastPageLi);

            //把ul加入到nav
            var navEle = $("<nav></nav>").append(ul);
            navEle.appendTo("#page_nav_area");
        }

        function init_morris_charts() {
            //https://www.highcharts.com.cn/demo/highcharts
            var chart = Highcharts.chart('container', {
                title: {
                    text: '2018 ~ 2019 接口運(yùn)行'
                },
                subtitle: {
                    text: '日常巡檢'
                },
                yAxis: {
                    title: {
                        text: '接口數(shù)量'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle'
                },
                plotOptions: {
                    series: {
                        label: {
                            connectorAllowed: false
                        },
                        pointStart: 2018
                    }
                },
                series: [{
                    name: '搜索',
                    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
                }, {
                    name: '商祥',
                    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
                }, {
                    name: '購(gòu)物車',
                    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
                }, {
                    name: '結(jié)算',
                    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
                }],
                responsive: {
                    rules: [{
                        condition: {
                            maxWidth: 500
                        },
                        chartOptions: {
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                verticalAlign: 'bottom'
                            }
                        }
                    }]
                }
            });
        }

        function init_morric_UI() {
            var chart = Highcharts.chart('ChartUI', {
                title: {
                    text: 'UI模塊<br>占比',
                    align: 'center',
                    verticalAlign: 'middle',
                    y: 50
                },
                tooltip: {
                    headerFormat: '{series.name}<br>',
                    pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {
                    pie: {
                        dataLabels: {
                            enabled: true,
                            distance: -50,
                            style: {
                                fontWeight: 'bold',
                                color: 'white',
                                textShadow: '0px 1px 2px black'
                            }
                        },
                        startAngle: -90, // 圓環(huán)的開(kāi)始角度
                        endAngle: 90,    // 圓環(huán)的結(jié)束角度
                        center: ['50%', '75%']
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'UI自動(dòng)化模塊',
                    innerSize: '50%',
                    data: [
                        ['商祥', 45.0], ['購(gòu)物車', 26.8],
                        ['結(jié)算', 12.8],
                        ['搜索', 8.5],
                        ['我京', 6.2],
                        {
                            name: '其他',
                            y: 0.7,
                            dataLabels: {
                                // 數(shù)據(jù)比較少,沒(méi)有空間顯示數(shù)據(jù)標(biāo)簽,所以將其關(guān)閉
                                enabled: false
                            }
                        }
                    ]
                }]
            });
        }

        /**
         * 和PHP一樣的時(shí)間戳格式化函數(shù)
         * date('Y-m-d','1350052653');//很方便的將時(shí)間戳轉(zhuǎn)換成了2012-10-11
         date('Y-m-d H:i:s','1350052653');//得到的結(jié)果是2012-10-12 22:37:33
         * @param {string} format 格式
         * @param {int} timestamp 要格式化的時(shí)間 默認(rèn)為當(dāng)前時(shí)間
         * @return {string}   格式化的時(shí)間字符串
         */
        function date(format, timestamp){
            var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
            var pad = function(n, c){
                if((n = n + "").length < c){
                    return new Array(++c - n.length).join("0") + n;
                } else {
                    return n;
                }
            };
            var txt_weekdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
            var txt_ordin = {1:"st", 2:"nd", 3:"rd", 21:"st", 22:"nd", 23:"rd", 31:"st"};
            var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            var f = {
                // Day
                d: function(){return pad(f.j(), 2)},
                D: function(){return f.l().substr(0,3)},
                j: function(){return jsdate.getDate()},
                l: function(){return txt_weekdays[f.w()]},
                N: function(){return f.w() + 1},
                S: function(){return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th'},
                w: function(){return jsdate.getDay()},
                z: function(){return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0},

                // Week
                W: function(){
                    var a = f.z(), b = 364 + f.L() - a;
                    var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
                    if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
                        return 1;
                    } else{
                        if(a <= 2 && nd >= 4 && a >= (6 - nd)){
                            nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
                            return date("W", Math.round(nd2.getTime()/1000));
                        } else{
                            return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
                        }
                    }
                },

                // Month
                F: function(){return txt_months[f.n()]},
                m: function(){return pad(f.n(), 2)},
                M: function(){return f.F().substr(0,3)},
                n: function(){return jsdate.getMonth() + 1},
                t: function(){
                    var n;
                    if( (n = jsdate.getMonth() + 1) == 2 ){
                        return 28 + f.L();
                    } else{
                        if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
                            return 31;
                        } else{
                            return 30;
                        }
                    }
                },

                // Year
                L: function(){var y = f.Y();return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0},
                //o not supported yet
                Y: function(){return jsdate.getFullYear()},
                y: function(){return (jsdate.getFullYear() + "").slice(2)},

                // Time
                a: function(){return jsdate.getHours() > 11 ? "pm" : "am"},
                A: function(){return f.a().toUpperCase()},
                B: function(){
                    // peter paul koch:
                    var off = (jsdate.getTimezoneOffset() + 60)*60;
                    var theSeconds = (jsdate.getHours() * 3600) + (jsdate.getMinutes() * 60) + jsdate.getSeconds() + off;
                    var beat = Math.floor(theSeconds/86.4);
                    if (beat > 1000) beat -= 1000;
                    if (beat < 0) beat += 1000;
                    if ((String(beat)).length == 1) beat = "00"+beat;
                    if ((String(beat)).length == 2) beat = "0"+beat;
                    return beat;
                },
                g: function(){return jsdate.getHours() % 12 || 12},
                G: function(){return jsdate.getHours()},
                h: function(){return pad(f.g(), 2)},
                H: function(){return pad(jsdate.getHours(), 2)},
                i: function(){return pad(jsdate.getMinutes(), 2)},
                s: function(){return pad(jsdate.getSeconds(), 2)},
                //u not supported yet

                // Timezone
                //e not supported yet
                //I not supported yet
                O: function(){
                    var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
                    if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
                    return t;
                },
                P: function(){var O = f.O();return (O.substr(0, 3) + ":" + O.substr(3, 2))},
                //T not supported yet
                //Z not supported yet

                // Full Date/Time
                c: function(){return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P()},
                //r not supported yet
                U: function(){return Math.round(jsdate.getTime()/1000)}
            };

            return format.replace(/[\ ]?([a-zA-Z])/g, function(t, s){
                if( t!=s ){
                    // escaped
                    ret = s;
                } else if( f[s] ){
                    // a date function exists
                    ret = f[s]();
                } else{
                    // nothing special
                    ret = s;
                }
                return ret;
            });
        }
        ////調(diào)用方法
        // var time = Date.parse("你的時(shí)間字符串");

        // dt = time.format("yyyy-MM-dd hh:mm:ss");
    </script>
</div>
</body>
</html>
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI