引入datatable.css,datatable.js body里写下完整的table格式
<table id="table1" class="table table-hover mb-none table-striped table-bordered" style="border-collapse: collapse;"> <thead> <tr> <th>{$Think.lang.Id}</th> </tr> </thead> <tbody> <volist name="list" id="vo"> <tr> <td>{$key+1}</td> </tr> </volist> </tbody> </table> $(document).ready(function() { oTable = $('#table1').dataTable({ "paging": false, "lengthChange": false, "info": false, "searching": false, "fnCreatedRow": function(nRow, aData, iDataIndex) {//下拉列表方法 //选择第几列加入下拉按钮 $('td:eq(7)', nRow).prepend("<button class='row-details row-details-close btn btn-info btn-xs' data_id='" + aData[8] + "'>账号邮箱</button>"); }, }); $('.table').on('click', ' tbody td .row-details', function() { var nTr = $(this).parents('tr')[0]; console.log(oTable); if(oTable.fnIsOpen(nTr)) //判断是否已打开 { $(this).addClass("row-details-close").removeClass("row-details-open"); oTable.fnClose(nTr); } else { $(this).addClass("row-details-open").removeClass("row-details-close"); fnFormatDetails(nTr, $(this).attr("data_id")); } }); }); //详情 function fnFormatDetails(nTr, pdataId) { console.log(pdataId) $.ajax({ url: "{:U('Config/userEmail')}", //通过页面元素的ID来获取设备ID type: "post", //选择传值方式 data: { uid: pdataId }, dataType: "JSON", success: function(data) { console.log(data); var sOut = '<table class="table table-bordered" style="text-align:center;margin:0;"><tr><th style="text-align:center;">平台</th><th style="text-align:center;">账号</th><th style="text-align:center;">邮箱</th><th style="text-align:center;">操作</th></tr>'; for(var i = 0; i < data.length; i++) { sOut += '<tr><td><a target="_blank" href="https://'+data[i].url+'"><span style="font-weight:bold;">' + data[i].name + '</span></a></td>'+ '<td><span style="font-weight:bold;">' + data[i].account_number + '</span></td>' + '<td><span style="font-weight:bold;">' + data[i].email + '</span></td>' + '<td><button class="btn btn-danger btn-xs" onclick=del_email(' + data[i].id + ')>删除</button></td></tr>'; } sOut += '</table>' oTable.fnOpen(nTr, sOut, 'details'); //展开下拉列表 } }) }