• 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="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="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="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="30%">'+resData[i].num2+'</td>';
    					sOut+='</tr>'
    								
    				}
    				sOut+='</table>';
    				oTable.fnOpen( nTr,sOut, 'details' );
    			
    	    }
     
    	</script>
    
    

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

  • 相关阅读:
    【转载】webDriver拾级而上·之五 iframe的处理
    Linux课程笔记 用户和用户组管理
    Linux课程笔记 文件和目录权限
    Linux课程笔记 软硬链接
    Java算法面试题
    Linux课程笔记 Day09 课上内容总结 MySql,Php的安装及Apache,Nginx,Php的优化
    Day13 高级子查询
    Day12 SET运算符
    Day11 其他数据库对象
    Linux课程笔记 Day08 课上内容总结 Apache,Raid技术及Nginx
  • 原文地址:https://www.cnblogs.com/pangchunyu/p/12799980.html
Copyright © 2020-2023  润新知