Laravel9+Bootstrap4点击表格行弹出详情模态框无响应问题

• DOM存在重复ID冲突：模态框外层容器和内部标题都使用了id="showList"，JS获取模态框节点时会匹配到错误的元素，导致模态框无法唤起
• 表格行、表头添加的d-flex类和DataTable默认表格布局规则冲突，DataTable无法正确识别行DOM节点，行点击事件无法正常触发
• 空状态提示<h4>No tienes listas.</h4>直接放在tbody内部，破坏了表格原生结构，DataTable初始化时会解析异常
• 直接通过table.row(this).data()[索引]取列数据，在开启响应式配置、列内容带前后空白时容易出现数据错位、取值为空的问题
• 事件绑定没有排除DataTable自动生成的空占位行，点击空行时会触发JS报错阻断后续逻辑

1. 调整视图HTML代码 #

修复重复ID，移除冲突的flex类，把详情数据存在行的自定义属性上，空状态提示移到表格外部避免破坏结构，修正后代码如下：

<!-- 列表区域 -->
<div class="row">
    <h3>@lang('Available lists')</h3>
</div>
<table class="table table-dark table-hover display" id="listsTable">
    <thead>
        <tr>
            <th class="col-8">@lang('Name of the list')</th>
            <th class="col-2 text-center">@lang('Number of students')</th>
        </tr>
    </thead>
    <tbody>
        @forelse ($lists as $list)
        <tr 
            data-title="{{ $list['title'] }}" 
            data-student-count="{{ count(explode(',', $list['emails_list'])) }}"
        >
            <td class="col-8">{{ $list['title'] }}</td>
            <td class="col-2 text-center">{{ count(explode(',', $list['emails_list'])) }}</td>
        </tr>
        @empty
        @endforelse
    </tbody>
</table>
@if(empty($lists))
    <h4>No tienes listas.</h4>
@endif

<!-- 详情模态框 -->
<div class="modal fade" id="showListModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <input type="hidden" id="listId" name="id">
                <h4 class="modal-title text-dark">@lang('List details'):</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-dark">
                <div class="listname"><p>@lang('List name'): </p><span></span></div>
                <div class="students"><p>@lang('Students'): </p><span></span></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">@lang('Close')</button>
            </div>
        </div>
    </div>
</div>

2. 调整JS交互逻辑 #

移除冲突的布局配置，事件触发时先过滤无效行，直接从行自定义属性取数避免错位，修正后代码如下：

<script>
jQuery(document).ready(function($) {
    const table = $('#listsTable').DataTable({
        searching: false,
        responsive: true,
        autoWidth: false,
        columnDefs: [
            { targets: 0, width: '80%' },
            { targets: 1, width: '20%', className: 'text-center' }
        ]
    });

    $('#listsTable tbody').on('click', 'tr', function () {
        // 过滤DataTable自动生成的空占位行
        if ($(this).hasClass('dataTables_empty')) return;

        // 直接从行属性取数，不受DataTable响应式布局影响
        const listTitle = $(this).data('title');
        const studentCount = $(this).data('student-count');

        // 填充模态框内容
        $('.listname span').text(listTitle);
        $('.students span').text(studentCount);

        // 唤起模态框
        $('#showListModal').modal('show');
    });
});
</script>

3. 确认资源加载顺序 #

页面必须按以下顺序加载依赖资源，否则会出现JS报错导致功能失效：

• 优先加载jQuery库
• 其次加载Bootstrap的JS文件
• 最后加载DataTable的CSS、JS文件

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