dataTable 根据不同行数据动态显示行操作

dataTable是bootstrap中很好用的一个表格插件，本文是使用bootstrap中dataTable插件对表格进行行操作。

最终页面效果如下：

1.首先引入bootstrap中的dataTable插件

可参考内容：如何使用dataTable插件

2.现对页面进行修改以满足我想要的页面效果。html 页面

	<div class="row">
		<div class="col-xs-12">
			<table id="dynamic-table" class="table table-striped table-bordered table-hover">
				<thead>
				</thead>

				<tbody>
				</tbody>
			</table>
		</div><!-- /.span -->
	</div>			

3.脚本主要部分代码

$(document).ready(function(){
	//dataTable的属性设置
	$("#dynamic-table").dataTable({
		"destroy":true,//消除重定义出错
		"bPaginate":false,//是否使用分页
		"bFilter": false, //是否使用搜索
		"sInfo":true,
		"bAutoWidth":false,
		"oLanguage":{
			"sInfo":"显示 _START_ 至 _END_ 条    本页共 _TOTAL_ 条",
			"sZeroRecords":"没有数据",
		},
		"aoColumns":[
			{"data":"recordId","sTitle":"进货记录id"},
			{"data":"shopId","sTitle":"商店名称"},
			{"data":"createTime","sTitle":"创建时间"},
			{"data":"confirmTime","sTitle":"确认时间"},
			{"data":"goodId","sTitle":"商品名称"},
			{"data":"recordNumber","sTitle":"进货数量"},
			{"data":"recordStatus","sTitle":"进货状态"},
			{"data":" ","sTitle":"操作","bSortable":false,
				"mRender":function(data,type,full){
					var data = full;//全部行数据，可获取隐藏行数据
					var recordStatus = data.recordStatus;
					if(recordStatus == "审核通过"){
						return "<div class='hidden-sm hidden-xs action-buttons'><a data-toggle='modal' class='green' id='Yes' title='审核通过'><span class='glyphicon glyphicon-ok'></span></a></div>";
					}else if(recordStatus == "审核不通过"){
						return "<div class='hidden-sm hidden-xs action-buttons'><a  data-toggle='modal' class='red' id='No' title='审核不通过'><span class='glyphicon glyphicon-remove'></span></a></div>";
					}else if(recordStatus == "待审核"){
						return "<div class='hidden-sm hidden-xs action-buttons'><a href='#modal-table-edit' data-toggle='modal' class='blue' id='edit' title='待审核'><span class='glyphicon glyphicon-flag'></span></a></div>";
					}
				}}
		],
		//"aaData":list,
		"aaData":[
					{"recordId":"0","shopId":"乐美","createTime":"2016.07.26","confirmTime":"","goodId":"咖啡","recordNumber":"0","recordStatus":"审核通过"},
					{"recordId":"1","shopId":"嘉年华","createTime":"2016.07.26","confirmTime":"","goodId":"果汁","recordNumber":"0","recordStatus":"审核不通过"},
					{"recordId":"2","shopId":"美丽世界","createTime":"2016.07.26","confirmTime":"","goodId":"水果","recordNumber":"0","recordStatus":"待审核"},
				],
	});
	
	//标记点击了哪个按钮
	$("#dynamic-table tbody tr #detail").on("click",function(){
		f = 1;
	});

	$("#dynamic-table tbody tr #edit").on("click",function(d){
		f = 2;
	});

	$("#dynamic-table tbody tr #Yes").on("click",function(d){
		f = 3;
	});

	$("#dynamic-table tbody tr #No").on("click",function(d){
		f = 3;
	});
	
	//设置行点击事件
	$("#dynamic-table tbody tr").on("click",function(){
		var td = $("td",this);
		var recordId = $(td[0]).text();
		//var stockStatus = $(td[6]).text();//获得第五列数据
		if(f == 1){//详情
			debugger;
		}else if(f == 2){//修改进货状态
			$("#recordId").val(recordId);//修改时弹出模态框
		}else if(f == 3){
			alert("该进货状态已经审核过，不能修改！");
		}
	});

});

mReader:function(data,type,full)其中的full就是这一列的所有信息，试验了一下，的却访问隐藏的那一列，那么通过这种变相的方法就可以访问隐藏的数据了。

学习记录，多多更正修改，原创内容，转载请注明出处。