DataTables分組實現（轉）

原文內容連接：http://www.javashuo.com/article/p-ngjvlbkx-hr.html

1. 仿照實現JS

<script>
var table ;
$(document).ready(function() {
   table = $('#dataGrid').dataTable(
		{
			"bProcessing" : true,
			"bFilter" : false,// 搜索欄
			"bLengthChange" : false,// 每行顯示記錄數
			"bSort" : false,// 排序
			"sPaginationType" : "full_numbers",
			"bServerSide" : true,
			"scrollY" : 600,
			"scrollCollapse" : true,
			fixedHeader : true,
			"bPaginate" : false,// 分頁按鈕
			columnDefs : [ {
				targets : 1,
				"render" : function(data, type, row) {
					return "<span class='row-details row-details-close' data_id='"
							+ row.menu_id + "'>" + data + "</span>";
				}
			} ],
			"sAjaxSource" : '../../sys/menu/list?_' + $.now(),
			"fnServerParams" : function(aoData) {
				aoData.push({
					"name" : "parent_id",
					"value" : 0
				})
			},
			"columns" : [
					{
						"data" : "menu_id",
						"width" : "50",
						"visible" : false
					},
					{
						"data" : "name",
						"width" : "100"
					},
					{
						"data" : "parentName",
						"width" : "180"
					},
					{
						"data" : "icon",
						"width" : "50",
						"render" : function(data, type, row, meta) {
							return row.icon == null ? ''
									: '<i class="' + row.icon
											+ ' fa-lg"></i>';
						}
					},
					{
						"data" : "type",
						"width" : "50",
						"render" : function(value, row, index) {
							if (index.type === 0) {
								return '<span class="label label-primary">目錄</span>';
							}
							if (index.type === 1) {
								return '<span class="label label-success">菜單</span>';
							}
							if (index.type === 2) {
								return '<span class="label label-warning">按鈕</span>';
							}
						}
					}, {
						"data" : "order_num",
						"width" : "50"
					}, {
						"data" : "url",
						"width" : "100"
					}, {
						"data" : "perms",
						"width" : "200"
					} ],
			"fnServerData" : function(sSource, aoData, fnCallback) {
				$.ajax({
					"type" : 'POST',
					"url" : sSource,
					"dataType" : "json",
					"data" : aoData,
					"success" : function(resp) {
						fnCallback(resp);
					}
				});
			},
	
		});
    
    table.on('click', ' tbody td .row-details', function() {
		var nTr = $(this).parents('tr')[0];
		if (table.fnIsOpen(nTr))// 判斷是否已打開
		{
			/* This row is already open - close it */
			$(this).addClass("row-details-close").removeClass(
					"row-details-open");
			table.fnClose(nTr);
		} else {
			/* Open this row */
			$(this).addClass("row-details-open").removeClass(
					"row-details-close");
			// 調用方法顯示詳細信息 data_id爲自定義屬性 存放配置ID
			fnFormatDetails(nTr, $(this).attr("data_id"));
		}
	});
});

function fnFormatDetails(nTr, pdataId) {
	$.ajax({
		type : 'post',
		url : '../../sys/menu/list?_' + $.now(),
		dataSrc : '',
		data : {
			"parent_id" : pdataId
		},
		dataType : "text",
		async : true,
		success : function(data, textStatus) {
			if (textStatus == "success") { // 轉換格式 組合顯示內容
				var res = eval("(" + data + ")");
				var sOut = '<table class="table table-bordered compact">';
				for (var i = 0; i < res.aaData.length; i++) {
					sOut += '<tr>';
					sOut += '<td style="display:none;">' + res.aaData[i].menu_id
							+ '</td>';
					sOut += '<td >' + res.aaData[i].name + '</td>';
					sOut += '<td >' + res.aaData[i].parentName + '</td>';
					sOut += '<td >' + res.aaData[i].icon + '</td>';
					sOut += '<td >' + res.aaData[i].type + '</td>';
					sOut += '<td >' + res.aaData[i].order_num + '</td>';
					sOut += '<td >' + res.aaData[i].url + '</td>';
					sOut += '<td >' + res.aaData[i].perms + '</td>';
					sOut += '</tr>';

				}
				sOut += '</table>';
				table.fnOpen(nTr, sOut, 'details');
			}
		},
		error : function() {// 請求出錯處理
			table.fnOpen(nTr, '加載數據超時~', 'details');
		}
	});

}
</script>