datatable参数

<script>
 
	var oTable;
	jQuery(document).ready(function() {       
	oTable =$("#sample_1").dataTable( {
		"aoColumnDefs": [
			{"bSortable": false, "aTargets": [ 0 ] }
		],
		//"aaSorting": [[1, 'asc']],//排序
		"aLengthMenu": [
			[5,10, 15, 20, -1],
			['每页5条', '每页10条', '每页15条', '每页20条', "显示所有数据"] // change per page values here
		],
		"iDisplayLength": 5,
		"aaData":[
			['a','aa','aaa','aaaa'],
			['b','bb','bbb','bbbb'],
			['c','cc','ccc','cccc'],
			['a','aa','aaa','aaaa'],
			['b','bb','bbb','bbbb'],
			['c','cc','ccc','cccc'],
			['a','aa','aaa','aaaa'],
			['b','bb','bbb','bbbb'],
			['c','cc','ccc','cccc'],
			['a','aa','aaa','aaaa'],
			['b','bb','bbb','bbbb'],
			['c','cc','ccc','cccc']
		],
		"aoColumns":[
			{
				"mData":null						
			},
			{
				"mData":0						
			},
			{
				"mData":1						
			},
			{
				"mData":2						
			}/*,
			{
				"mData":3						
			}*/
		],
		"oLanguage": {
			"oAria":{
				"sSortAscending": " - click/return to sort ascending",
				"sSortDescending": " - click/return to sort descending"
			},
			"sLengthMenu": "每页显示 _MENU_ 条记录", 
			"sZeroRecords": "对不起,查询不到任何相关数据", 
			"sEmptyTable":"未有相关数据",
			"sLoadingRecords":"正在加载数据-请等待...",
			"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录。", 
			"sInfoEmpty": "当前显示0到0条,共0条记录", 
			"sInfoFiltered": "(数据库中共为 _MAX_ 条记录)", 
			"sProcessing": "<img src='${pageContext.request.contextPath }/image/loading.gif'/> 正在加载数据...", 
			"sSearch": "模糊查询:", 
			"sUrl": "", //多语言配置文件,可将oLanguage的设置放在一个txt文件中,例:Javascript/datatable/dtCH.txt 
			"oPaginate": { 
				"sFirst": "第一页", 
				"sPrevious": " 上一页 ", 
				"sNext": " 下一页 ", 
				"sLast": " 最后一页 "
			} 
		}, //多语言配置 
		// set the initial value
				
		"fnCreatedRow":function(nRow,aData,iDataIndex){
	 			$('td:eq(0)',nRow).html(iDataIndex+1);//为第一个单元格增加序号
	 			$('td:eq(1)',nRow).html("<span class='row-details row-details-close' data_id='"+aData[1]+"'></span> "+aData[0]);
	 	}
	});
 
	$('.table').on('click', ' tbody td .row-details', function () {
	   	var nTr = $(this).parents('tr')[0];
	   	if ( oTable.fnIsOpen(nTr) )//判断是否已打开            
	   	{
	   	/* This row is already open - close it */
	   		$(this).addClass("row-details-close").removeClass("row-details-open");
	   		        oTable.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){
		//根据配置Id 异步查询数据
		var resData=[{name:'a1',num1:22,count1:'70.25%',num2:21,count2:'46.02%'},{name:'a2',num1:57,count1:'18.21%',num2:14,count2:'31.16%'},{name:'a3',num1:34,count1:'10.8%',num2:116,count2:'24.48%'},{name:'a4',num1:12,count1:'3.96%',num2:195,count2:'4.24%'},{name:'a5',num1:33,count1:'1.06%',num2:13,count2:'2.96%'}];	
		/**
		$.ajax({
			type:'post',	 	
			url:'${pageContext.request.contextPath }/statistic/statistic!ajaxDetails.do',
			data:{"pdataId":pdataId},
		 	dataType:"text",
		  	async:true,
		 	beforeSend:function(xhr){//信息加载中
				oTable.fnOpen( nTr, '<span id="configure_chart_loading"><img src="${pageContext.request.contextPath }/image/select2-spinner.gif"/>详细信息加载中...</span>', 'details' );
				},
			success:function (data,textStatus){								
				if(textStatus=="success"){	//转换格式 组合显示内容
					var res = eval("("+data+")");
					var sOut = '<table style="width:100%;">';
					for(var i=0;i<res.length;i++){
						sOut+='<tr>';
						sOut+='<td width="5%"></td><td width="35%">'+res[i].name+'</td>';
						sOut+='<td width="30%"><div class="div_left">'+res[i].num1+'</div><div class="div_center">|</div><div class="div_right">'+res[i].count1+'</div></td>';
						sOut+='<td style="width:30%"><div class="div_left">'+res[i].num2+'</div><div class="div_center">|</div><div class="div_right">'+res[i].count2+'</div></td>';
						sOut+='</tr>'
								
					}
					sOut+='</table>';
					oTable.fnOpen( nTr,sOut, 'details' );
				}
			},
			error: function(){//请求出错处理
				oTable.fnOpen( nTr,'加载数据超时~', 'details' );
			}
		});**/
 
				var sOut = '<table style="width:100%;">';
				for(var i=0;i<resData.length;i++){
					sOut+='<tr>';
					sOut+='<td width="10%"></td><td width="30%">'+resData[i].name+'</td>';
					sOut+='<td width="30%">'+resData[i].num1+'<div class="div_center"></td>';
					sOut+='<td style="width:30%">'+resData[i].num2+'</td>';
					sOut+='</tr>'
								
				}
				sOut+='</table>';
				oTable.fnOpen( nTr,sOut, 'details' );
			
	    }
 
	</script>

https://blog.csdn.net/zdx1515888659/article/details/41678129

posted @ 2020-04-29 09:23  大雨大雨大雨  阅读(129)  评论(0编辑  收藏  举报