如何在DataTable中获取条目ID并在模态框展示Twig变量

1. 给DataTable详情按钮绑定条目数据 #

在DataTable的每行详情按钮里，用Twig把当前条目的ID和需要展示的字段存到data-*属性里，点击时就能直接拿到对应数据：

<td>
    <a href='#ModalInfo' class="btn btn-info-modal" data-toggle="modal" title='详情'
       data-id="{{ alerta.id }}"
       data-resp="{{ alerta.resp }}"
       data-investment="{{ alerta.investment }}">
        <i class="fa-solid fa-info text-warning"></i>
    </a>
</td>

注意：把data-target="#ModalInfo"移到<a>标签上（或保留data-toggle="modal"即可），另外给按钮加个btn-info-modal类，方便JS精准选择。

2. 修正模态框结构并预留填充位 #

先把模态框里的语法错误（比如多余的</button>）改掉，再给要动态填充的内容加个类，方便后续替换：

<div class="modal fade" id="ModalInfo" tabindex="-1" role="dialog" aria-labelledby="ModalCentral" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="TituloModalCentralizado">附加信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>条目ID：<span class="modal-id"></span></p>
                <p>负责人：<span class="modal-resp"></span></p>
                <p>投资额：<span class="modal-investment"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

3. 用JS获取数据并填充模态框 #

监听模态框的show.bs.modal事件（这个事件在模态框显示前触发，刚好适合提前填数据），拿到按钮上的data属性值，再塞到模态框对应的位置：

<script type="text/javascript">
    $('#ModalInfo').on('show.bs.modal', function (event) {
        // 拿到触发弹窗的按钮
        const triggerBtn = $(event.relatedTarget);
        // 从按钮的data属性里取数据
        const itemId = triggerBtn.data('id');
        const resp = triggerBtn.data('resp');
        const investment = triggerBtn.data('investment');
        
        // 拿到弹窗元素
        const modal = $(this);
        // 把数据填充到弹窗里
        modal.find('.modal-id').text(itemId);
        modal.find('.modal-resp').text(resp);
        modal.find('.modal-investment').text(investment);
    })
</script>

可选：数据量大时用AJAX加载 #

如果条目太多，不想在页面渲染时把所有数据都输出，可以只存ID，然后通过AJAX请求后端拿详情：

按钮修改：

<td>
    <a href='#ModalInfo' class="btn btn-info-modal" data-toggle="modal" title='详情'
       data-id="{{ alerta.id }}">
        <i class="fa-solid fa-info text-warning"></i>
    </a>
</td>

JS修改：

<script type="text/javascript">
    $('#ModalInfo').on('show.bs.modal', function (event) {
        const triggerBtn = $(event.relatedTarget);
        const itemId = triggerBtn.data('id');
        const modal = $(this);
        
        // 发AJAX请求后端接口
        $.ajax({
            url: `/api/alerta/${itemId}`, // 替换成你的实际后端接口地址
            method: 'GET',
            success: (data) => {
                // 填充返回的数据
                modal.find('.modal-id').text(data.id);
                modal.find('.modal-resp').text(data.resp);
                modal.find('.modal-investment').text(data.investment);
            },
            error: () => {
                modal.find('.modal-body').html('<p>加载失败，请稍后重试</p>');
            }
        });
    })
</script>

内容的提问来源于stack exchange，提问作者Jeferson