<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