From 8aff8639162969aa193976ea8b9208211bdc963e Mon Sep 17 00:00:00 2001
From: wangsiyuan <2392948297@qq.com>
Date: Tue, 26 Dec 2023 19:01:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=20attendance-teacher.html?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/templates/attendance-teacher.html | 103 +++++++++++++++++++++++---
 1 file changed, 92 insertions(+), 11 deletions(-)
diff --git a/app/templates/attendance-teacher.html b/app/templates/attendance-teacher.html
index c5bdc98..82ac2b3 100644
--- a/app/templates/attendance-teacher.html
+++ b/app/templates/attendance-teacher.html
@@ -6,7 +6,7 @@
     <meta name="renderer" content="webkit"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <link href="static/css/layui.css" rel="stylesheet">
+    <link href="/static/css/layui.css" rel="stylesheet">
 </head>
 
 <body>
@@ -14,14 +14,14 @@
     <div class="layui-header">
         <div class="layui-logo layui-hide-xs layui-bg-black">网上上课点名系统</div>
         <!-- 头部区域（可配合layui 已有的水平导航） -->
-            <ul class="layui-nav layui-layout-left">
-      <!-- 移动端显示 -->
-      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
-        <i class="layui-icon layui-icon-spread-left"></i>
-      </li>
-      <li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/attendance">签到</a></li>
-      <li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/import-class">导入班级</a></li>
-    </ul>
+        <ul class="layui-nav layui-layout-left">
+            <!-- 移动端显示 -->
+            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
+                <i class="layui-icon layui-icon-spread-left"></i>
+            </li>
+            <li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/attendance">签到</a></li>
+            <li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/import-class">导入班级</a></li>
+        </ul>
         <ul class="layui-nav layui-layout-right">
             <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                 <a href="javascript:;">
@@ -50,10 +50,29 @@
             </ul>
         </div>
     </div>
+    <div class="layui-body">
+        <table id="attendanceTable" class="layui-table">
+            <!-- 表头 -->
+            <thead>
+            <tr>
+                <th>课程名称</th>
+                <th>课程代码</th>
+                <th>学分</th>
+                <th>班级名称</th>
+                <th>专业</th>
+                <th>签到</th>
+            </tr>
+            </thead>
+            <tbody>
+            <!-- 表格数据将在这里填充 -->
+            </tbody>
+        </table>
+        <div id="pagination"></div>
+    </div>
 </div>
 
-<script src="static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
-<script src="static/layui.js"></script>
+<script src="/static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
+<script src="/static/layui.js"></script>
 <script>
     // 请求后端获取菜单数据
     $.get('/api/menu', function (menuItems) {
@@ -67,8 +86,70 @@
 
         layui.element.render('nav', 'test');
     });
+    layui.use(['laypage', 'element', 'jquery', 'dropdown'], function () {
+        var laypage = layui.laypage;
+        var $ = layui.jquery;
+
+        function renderTable(page) {
+            // 发送GET请求到服务器端点
+            $.get('/api/get-teacher-attendance-table?page=' + page, function (response) {
+                var $tbody = $('#attendanceTable tbody');
+                $tbody.empty(); // 清空表格内容
+
+                // 遍历返回的数据数组
+                response.data.forEach(function (item) {
+                    // 创建新的行并填充数据
+                    var $row = $('<tr></tr>');
+                    $row.append(`<td>${item.course_name}</td>`);
+                    $row.append(`<td>${item.course_code}</td>`);
+                    $row.append(`<td>${item.credits}</td>`);
+                    $row.append(`<td>${item.class_name}</td>`);
+                    $row.append(`<td>${item.major}</td>`);
+                    $row.append(`
+                <td>
+                    <div class="layui-btn-group">
+                        <button class="layui-btn layui-btn-normal layui-btn-sm dropdown-toggle" type="button">
+                            签到 <span class="layui-icon layui-icon-down"></span>
+                        </button>
+                        <dl class="dropdown-menu" style="display:none;">
+                            <dd><a href="javascript:void(0);" onclick="markAttendance(this, 'present')">出勤</a></dd>
+                            <dd><a href="javascript:void(0);" onclick="markAttendance(this, 'absent')">缺席</a></dd>
+                            <dd><a href="javascript:void(0);" onclick="markAttendance(this, 'late')">迟到</a></dd>
+                            <dd><a href="javascript:void(0);" onclick="markAttendance(this, 'excused')">请假</a></dd>
+                        </dl>
+                    </div>
+                </td>
+            `);
+                    $tbody.append($row);
+
+                });
+                // 渲染分页控件
+                laypage.render({
+                    elem: 'pagination', // 分页容器的id
+                    count: response.count, // 总条数
+                    limit: 10, // 每页显示条数
+                    curr: page, // 当前页
+                    jump: function (obj, first) {
+                        if (!first) { // 首次不执行
+                            renderTable(obj.curr); // 根据页码加载数据
+                        }
+                    }
+                });
+            });
+        }
+
+        // 初始加载第一页
+        renderTable(1);
+    });
+
 
     layui.use(['jquery'], function () {
+        var laypage = layui.laypage;
+        // 普通用法
+        laypage.render({
+            elem: 'attendance_teacher_page',
+            count: 100 // 数据总数
+        });
         var $ = layui.jquery; // 获取Layui的jQuery对象
 
         $('#logoutLink').on('click', function () {
