如何实现点击表格元素调用AJAX打开含数据的对话框

现状说明 #

我正在用PHP 7开发应用，已经通过以下jQuery代码从select_ordini.php获取JSON数据，填充DataTables表格：

$.post("select_ordini.php",{dataInizio:dataInizio,dataFine:dataFine,suffissoTable:suffissoTable}, function(data){},"json").done(function(data) { 
    if(data!=null){
        var PageViewDeterPiu = [];
        var dataAttuale="";
        $.each(data,function(i,item){
            $('#tb-lezioni').dataTable().fnAddData( [
                item.codOrdine,
                item.data,
                item.fatturaNro,
                item.totaleOrdine
            ]); 
        });
        notification("Notifica","Caricamento terminato");
    }else{
        notification("Notifica","Nessun Risultato trovato");
    }
}).fail(function(){
    notification("Notifica","Caricamento non terminato");
}).always(function() { });

需求 #

点击表格的ID列（codOrdine列），弹出对话框，对话框内的表格B需要调用select_ordini_articoli.php从数据库获取对应订单的商品数据。

实现步骤 #

1. 添加对话框HTML结构 #

先在页面中插入隐藏的对话框和遮罩层，用来展示详情表格：

<!-- 订单详情对话框 -->
<div id="orderDetailsModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:#fff; padding:24px; border-radius:8px; box-shadow:0 2px 12px rgba(0,0,0,0.15); z-index:1000; min-width:600px;">
    <h3 style="margin-top:0; margin-bottom:16px;">订单商品详情</h3>
    <table id="tb-ordini-articoli" class="display" width="100%">
        <thead>
            <tr>
                <!-- 根据实际返回的字段定义表头，示例如下 -->
                <th>商品编码</th>
                <th>商品名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <button onclick="closeModal()" style="margin-top:16px; padding:8px 16px; cursor:pointer;">关闭</button>
</div>

<!-- 遮罩层，防止对话框外的页面交互 -->
<div id="modalOverlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:999;"></div>

2. 绑定表格点击事件并加载详情数据 #

在原有JS代码之后，添加以下逻辑，实现点击ID列时发起请求并展示对话框：

// 监听表格ID列的点击事件（第一列为codOrdine）
$('#tb-lezioni').on('click', 'tbody td:first-child', function() {
    var codOrdine = $(this).text(); // 获取当前点击的订单ID
    openOrderDetails(codOrdine);
});

// 打开详情对话框并加载商品数据
function openOrderDetails(codOrdine) {
    // 清空详情表格的旧数据
    $('#tb-ordini-articoli').dataTable().fnClearTable();
    
    // 向后台请求对应订单的商品数据
    $.post("select_ordini_articoli.php", {codOrdine: codOrdine}, function(data){}, "json")
    .done(function(data) {
        if(data != null && data.length > 0) {
            // 填充详情表格
            $.each(data, function(i, item) {
                $('#tb-ordini-articoli').dataTable().fnAddData([
                    item.codArticolo,   // 替换为实际返回的商品编码字段
                    item.nomeArticolo,  // 替换为实际返回的商品名字段
                    item.quantita,      // 替换为实际返回的数量字段
                    item.prezzoUnitario,// 替换为实际返回的单价字段
                    item.subtotale      // 替换为实际返回的小计字段
                ]);
            });
        } else {
            notification("Notifica", "该订单无商品数据");
        }
        // 显示对话框和遮罩层
        $('#orderDetailsModal').show();
        $('#modalOverlay').show();
    })
    .fail(function() {
        notification("Notifica", "加载商品数据失败");
    });
}

// 关闭对话框函数
function closeModal() {
    $('#orderDetailsModal').hide();
    $('#modalOverlay').hide();
}

3. 后台接口注意事项 #

• 确保select_ordini_articoli.php能正确接收codOrdine参数，查询对应订单的商品数据，并返回格式正确的JSON数组。
• 后台返回的字段名要和前端填充表格时使用的字段名完全匹配（比如codArticolo、nomeArticolo等，需根据实际数据库字段调整）。

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