datatables动态添加隐藏行

开发的是订单管理页面，要实现功能，用户查看订单列表，单击详情时从后台取到该订单内的所有商品并胴体展示在表格行内，比较实用的一个内容。

未展开前如上图。

展开后如上图。

html部分

	                        	

	                          		

		                            	

		                            		
详情
			                              	
订单号
			                                
订单备注
			                              	
金额
			                             	
地址
			                             	
下单时间
			                            	
订单状态
			                             	
管理
		                           	 	
	                          		
	                        	
	                      	

js初始化datatables

var sendtable=$("#sendorder").DataTable({
			    order:[["5",'desc']],//按订单创建时间降序排序
			    autoWidth:false,//关闭自动计算列宽
			    searching:true,
			    page:false,
			    info:true,
			    processing: true,
			    serverSide: true,
			    ajax:"",
			    columns:[ //定义第一列为列动态添加/隐藏的标签，点击会触发显示/隐藏列操作
			      {
	              		"class":'details-control',
	              		"orderable":false,
	             		 "data":null,
	             		 "defaultContent":''
	             		 },
			      {data:"OID",width: "8%"},
			      {data:"MARK",width: "20%"},
			      {data:"ACTUAL",width: "8%"},
			      {data:"ADDRESS",width: "22%"},
			      {data:"STIME",width: "10%"},
			      {data:"STATE",width: "10%",render:function (data) {
			      	return '准备发货';
			      }},
			      {data:null,width: "20%"}
			    ],
			    columnDefs:[{
			      targets:-1,
			      data:null,
			      defaultContent:"安排发货取消订单",
			    }
			    ]  
			});

//调用行内折叠商品通用方法
		var a=$('#ordertable tbody');//当前table对象
		var b=alltable;//datatable对象
		getdetail(a,b);

行内动态添加/隐藏js方法

function getdetail (table1,table2) {//table1为当前table对象，table2为实例化好的datatable对象
 		table1.on('click', 'td.details-control', function () {//对表格第一列绑定单击事件
 		var tr = $(this).closest('tr');
	        var row = table2.row( tr );
	        var oid=$(this).next().text();
	        if ( row.child.isShown() ) {//如果详情列未显示，添加一些样式
	            $(this).children().removeClass('fa-chevron-circle-up');
	            $(this).children().addClass('fa-chevron-circle-down');
	            row.child.hide();
	            tr.removeClass('shown');
	        }
	        else {
	            $(this).children().removeClass('fa-chevron-circle-down');
	            $(this).children().addClass('fa-chevron-circle-up');
	            //console.log(cache);
	           if (cache[oid]) {//相应订单数据已存在，cache是一个全局变量，功能相当于缓存，存储订单详情内容，避免反复从服务器读取数据
	           		row.child(cache[oid]).show();
					tr.addClass('shown');
					//console.log('cache exist');
	            } else{//缓存数据不存在，存储数据
			$.post("",{OID:oid},function (data1) {
			            row.child(data1).show();
			            tr.addClass('shown');
			            cache[oid]=data1;
			    	});  
	            }
	        }
		});
 	}

就此大功告成，使用了ajax读取订单详情然后异步加载信息，其他的都很好理解，有兴趣的可以试一试。