动态表格与Ajax数据交互教程：Laravel后端与前端渲染实践

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\myModal; // 假设您的模型名为 myModal

class UserController extends Controller
{
    /**
     * 根据员工ID获取用户信息，并以JSON格式返回。
     *
     * @param int $id 员工ID
     * @return \Illuminate\Http\JsonResponse
     */
    public function searchInfo($id)
    {
        // 确保请求是通过Ajax发起的，增加安全性
        if (request()->ajax()) {
            // 从数据库查询与fk_emp_id匹配的所有用户数据
            // 注意：如果预期返回多条记录用于表格，应使用 get() 而非 firstOrFail()
            // firstOrFail() 仅返回单条记录，且在未找到时抛出异常
            $users = myModal::select('id_type', 'id_number')
                            ->where('fk_emp_id', '=', $id)
                            ->get(); // 使用 get() 获取一个集合

            // 返回JSON响应，包含查询到的用户数据
            return response()->json(['users' => $users]);
        }

        // 如果不是Ajax请求，可以返回错误或重定向
        abort(403, 'Unauthorized action.');
    }
}

<!-- 触发Ajax请求的按钮，使用data-id属性传递员工ID -->
<button type="button" class="btn btn-primary showdata" data-id="123">
    查看员工123信息
</button>

<!-- 员工信息模态框，包含动态表格 -->
<div class="modal fade" id="informationmodal" tabindex="-1" role="dialog" aria-labelledby="informationModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="informationModalLabel">员工详细信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table id="employee_data_table" class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>ID 类型</th>
                            <th>ID 号码</th>
                        </tr>
                    </thead>
                    <tbody id="employee_table_body">
                        <!-- 动态内容将插入到这里 -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

$(document).ready(function() {
    // 使用事件委托，监听'.showdata'按钮的点击事件
    $(document).on('click', '.showdata', function() {
        // 获取按钮上存储的员工ID
        var employeeId = $(this).data('id'); // 使用.data()方法获取data-id属性值

        // 发起Ajax请求
        $.ajax({
            url: "/search/" + employeeId + "/searchInfo", // 对应的后端路由
            dataType: "json", // 预期服务器返回的数据类型为JSON
            success: function(response) {
                // 清空表格body中现有的所有行
                $('#employee_table_body').empty();

                // 检查响应中是否存在用户数据且不为空
                if (response.users && response.users.length > 0) {
                    // 遍历用户数据数组
                    $.each(response.users, function(index, user) {
                        // 构建新的表格行HTML字符串
                        var row = '<tr>' +
                                    '<td>' + user.id_type + '</td>' +
                                    '<td>' + user.id_number + '</td>' +
                                  '</tr>';
                        // 将新行追加到表格body中
                        $('#employee_table_body').append(row);
                    });
                } else {
                    // 如果没有数据，显示提示信息
                    $('#employee_table_body').append('<tr><td colspan="2" class="text-center">暂无相关数据</td></tr>');
                }

                // 数据加载并渲染完成后，显示模态框
                $('#informationmodal').modal('show');
            },
            error: function(xhr, status, error) {
                // 处理Ajax请求失败的情况
                console.error("Ajax请求失败:", status, error);
                alert("加载数据失败，请稍后重试。");
                // 隐藏模态框，或者显示错误信息在模态框内
                $('#informationmodal').modal('hide');
            }
        });
    });
});