datable表格树

效果：

 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>