JS代码:
var pagesize = 10; $(document).ready(function() { var titleArray = [ {"className":'details-control',"orderable":false,"mData":null,"defaultContent": ''}, {"sTitle" : "网站名称","mData" : "webSiteName","bSortable" : false}, {"sTitle" : "网站域名","mData" : "domainName","bSortable" : false}, {"sTitle" : "IP","mData" : "ips","bSortable" : false}, {"sTitle" : "网站状态","mData" : "statusName","bSortable" : false}, {"className":'',"orderable":false,"mData":null}]; var table = $('#siteCancel').DataTable({ "sAjaxSource": ctx+"/hallBackstage/loadCancelSites", "aoColumns": titleArray, "bProcessing": true, "bFilter": true, //过滤功能 "bSort": false, //排序功能 "iDisplayLength": pagesize, // 每页显示多少条数据 "bPaginate" : true, "bLengthChange" : false, "bInfo":true, "bDestroy":true, "bJQueryUI": false, "bServerSide" : true, // 服务器端查找数据 "fnRowCallback" : function(nRow, aData, iDisplayIndex) { if(aData.status=="S0"){ $("td:eq(4)", nRow).html('<a id="' + aData.id + '" onclick="showSiteHistory(this)" title="查看备案记录"><font color="red">' + aData.statusName + '</font></a>'); }else{ $("td:eq(4)", nRow).html('<a id="' + aData.id + '" onclick="showSiteHistory(this)" title="查看备案记录"><font color="blue">' + aData.statusName + '</font></a>'); } if(null!=aData.ips){ if(aData.ips.length > 45){ var ipssort = aData.ips.substring(0, 45); $("td:eq(3)", nRow).html("<span title='" + aData.ips + "'>" + ipssort + "...</span>"); } } if(aData.flowStatus=="F9"&&(aData.status=="S1"||aData.status=="S2")){ $("td:eq(5)", nRow).html('<a id="' + aData.id + '" class="con_btn gray" title="注销">注销</a>'); }else{ $("td:eq(5)", nRow).html('<a id="' + aData.id + '" onclick="cancelWebSite(this)" class="con_btn" title="注销">注销</a>'); } $("td:eq(5)", nRow).css("text-align","center"); } }); $(".dataTables_filter").hide(); // 绑定搜索事件 $('#cancelBtn').on('click', datatableFilter); // Add event listener for opening and closing details $('#siteCancel tbody').on('click', 'td.details-control', function () { var tr = $(this).closest('tr'); var row = table.row( tr ); if ( row.child.isShown() ) { // This row is already open - close it row.child.hide(); tr.removeClass('shown'); } else { // Open this row format(row); //row.child( format(row.data()) ).show(); tr.addClass('shown'); } }); }); function datatableFilter() { var webSiteNameCan = $('#cancelWebSiteName').val(); var domainNameCan = $("#cancelDomainName").val(); var ips = $("#cancelIp").val(); var json = {}; if(webSiteNameCan != ""){ json['webSiteName'] = webSiteNameCan; } if(domainNameCan != ""){ json['domainName'] = domainNameCan; } if(ips != ""){ json['ips'] = ips; } $('#siteCancel').dataTable().fnFilter(JSON.stringify(json)); }; function format (row) { var d = row.data(); var selectedId = d.id; var tableStr=""; if(null!=selectedId){ $.ajax({ url: ctx+'/hallBackstage/loadSiteByRelid?id=' + selectedId, type: 'POST', async: false, dataType : 'json', processData: false, success: function(data) { tableStr = '<table class="sub_tab" style="width: 99%; margin:0px 5px 5px;" cellpadding="0" cellspacing="0" border="0"'; if(null!=data&&data.length>0){ for(var i=0;i<data.length;i++){ tableStr+='<tr>'+ '<td width="5%"></td>'+ '<td width="15%">'+data[i].webSiteName+'</td>'+ '<td width="15%">'+data[i].domainName+'</td>'+ '<td width="30%">'+d.ips+'</td>'+ '<td width="15%">子域名</td>'; if(data[i].flowStatus=="F9"){ tableStr+='<td style="text-align:center;" width="10%"><a id="' + data[i].id + '" class="con_btn gray" title="注销">注销</a></td>'; }else{ tableStr+='<td style="text-align:center;" width="10%"><a id="' + data[i].id + '" onclick="cancelWebSite(this)" class="con_btn" title="注销">注销</a></td>'; } tableStr+='</tr>'; } tableStr+='</table>'; row.child(tableStr).show(); }else{ tableStr+='<tr><td width="100%" style="text-align: center;">信息为空!</td></tr></table>'; row.child(tableStr).show(); } } }); } }
需要的css:
<style type="text/css"> td.details-control { background: url('../static/images/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../static/images/details_close.png') no-repeat center center; } </style>
需要引入的js及css:
<link href="${ctx}/static/datatables/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="${ctx}/static/datatables/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="${ctx}/static/datatables/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="${ctx}/static/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="${ctx}/static/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${ctx}/static/datatables/dataTables.bootstrap.js"></script>