jquery 动态渲染表格

 //点击查看详情
 <div>
                                            <span class="viewsDetails" data-toggle="modal" data-target="#handoverDetail"  data-id="{$v.id}">查看详情</span>
                                        </div>

//查看详情弹窗
<div  class="modal handoverDetail" id="handoverDetail" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg" style="width: 600px;">
        <div id="background" class="background" style="display:none"></div>
        <div id="progressBar" class="progressBar" style="display:none">数据加载中，请稍等...</div>
        <div class="modal-content" >
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="cancel-btn">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">查看详情</h4>
            </div>
             <div class="detailDivTable" style="height: 300px;overflow-y:auto;padding: 0px 10px;">
                <table class="table table-striped table-hover table-cursor column-settings-table payment-list-table m-b-xl"  id="detail_table" style="border-top:none !important;border-left:none !important;border-right:none !important;padding: 10px;">
                    <thead>
                        <tr>
                            <th style="width:100px">序号</th>
                            <th>名称1</th>
                            <th>名称2</th>
                        </tr>
                    </thead>
                    <tbody >

                    </tbody>
                </table>
             </div>
        </div>
    </div>
</div>

// jq 接口请求和数据渲染

(document).ready(function() { // 点击查看详情 ('.viewsDetails').click(function() { var idDetail = $(this).data('id'); // 清空表格内容$('#detailTable tbody').empty(); var ajaxbg = ('#handoverDetail').find("#background,#progressBar"); // 发送请求获取数据 .ajax({ url: /admin/user/getList?id=${idDetail}, // 替换为您的 API 地址 method: 'GET', beforeSend:function() { ajaxbg.show(); }, complete: function(response) { let tableData = JSON.parse(response.responseText) console.log('tableData',tableData) ajaxbg.hide(); if(tableData.error_code==0){ // 渲染表格

            renderTable(tableData.result);
          
            }else {
                $('#handoverDetail').hide()
                return swal({
                    title:"提示框",
                    text: tableData.error_msg,
                    type:"warning",
                    showCancelButton:"true",
                    confirmButtonText:"确定",
                    cancelButtonText:"取消",
                });
            }
            
        },
        error: function(xhr, status, error) {
            ajaxbg.hide();
            console.error('Error:', error);
        }
    });
});

// 渲染表格函数
function renderTable(data) {

    var tableBody = $('.detailDivTable tbody');
    var tableRows = ''; // 用于存储要替换的行数据
    if(data&&data.length>0){
           // 遍历数据并添加到表格中
    $.each(data, function(index, item) {
        var customerId = item.customer_id ? item.customer_id : '--'; // 如果 customer_id 存在，则使用它；否则使用 '--'
        var groupName = item.group_name ? item.group_name : '--'; // 如果 group_name 存在，则使用它；否则使用 '--'
    
        var row = '<tr>' +
                    '<td>' + (index + 1) + '</td>' + 
                    '<td>' + customerId + '</td>' + 
                    '<td>' + groupName + '</td>' + 
                  '</tr>';
                  tableRows+=row
    });
    tableBody.html(tableRows);
    }else {

        var noData=' <table class="table table-striped table-hover table-cursor column-settings-table payment-list-table "  id="detail_table"><tr class="empty-table-tr" style="border-top:none">\n' +
        '    <td  id="emptyTable" style="border-top:none">\n' +
        '        <div >\n' +
        '            <i class="fa fa-window-restore" aria-hidden="true"></i>\n' +
        '            <p>~~空空如也，当前模块暂无数据</p>\n' +
        '        </div>\n' +
        '    </td>\n' +
        '</tr></table>'

        $('.detailDivTable').html(noData);
    }

 
}

});