datatables动态添加隐藏行

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

未展开前如上图。

展开后如上图。

html部分

<div class="adv-table" >
	                        	<table class="table table-bordered table-striped" id="sendorder">
	                          		<thead>
		                            	<tr>
		                            		<th>详情</th>
			                              	<th>订单号</th>
			                                <th>订单备注</th>
			                              	<th>金额</th>
			                             	<th>地址</th>
			                             	<th>下单时间</th>
			                            	<th>订单状态</th>
			                             	<th>管理</th>
		                           	 	</tr>
	                          		</thead>
	                        	</table>
	                      	</div>

js初始化datatables

var sendtable=$("#sendorder").DataTable({
			    order:[["5",'desc']],//按订单创建时间降序排序
			    autoWidth:false,//关闭自动计算列宽
			    searching:true,
			    page:false,
			    info:true,
			    processing: true,
			    serverSide: true,
			    ajax:"<?php echo APP_URL_ROOT.'/order/waitsend'?>",
			    columns:[ //定义第一列为列动态添加/隐藏的标签，点击会触发显示/隐藏列操作
			      {
	              <span style="white-space:pre">		</span>"class":'details-control',
	              <span style="white-space:pre">		</span>"orderable":false,
	             <span style="white-space:pre">		</span> "data":null,
	             <span style="white-space:pre">		</span> "defaultContent":'<i id="details-button" class="fa fa-chevron-circle-down fa-2x center-block" style="margin-left:5px"></i>'
	             <span style="white-space:pre">		</span> },
			      {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:"<button id='tipsend' class='btn btn-info btn-xs'>安排发货</button><button id='cancelo' class='btn btn-danger btn-xs col-xs-offset-1'>取消订单</button>",
			    }
			    ]  
			});

//调用行内折叠商品通用方法
		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{//缓存数据不存在，存储数据
		<span style="white-space:pre">	</span>$.post("<?php echo APP_URL_ROOT.'/order/get_order_datail'?>",{OID:oid},function (data1) {
			            row.child(data1).show();
			            tr.addClass('shown');
			            cache[oid]=data1;
			    	});  
	            }
	        }
		});
 	}

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