DataTables是一个功能非常强大的带有分页功能的jQuery插件。之前在博客里写过一篇有关DataTables分页功能的博文，本篇里就不在重复了，只介绍一下DataTables行分组的展开与折叠功能的实现。
一、效果图
二、用到的js与Css
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link type="text/css" rel="stylesheet" href="font-awesome/css/font-awesome.css" />
<link type="text/css" rel="stylesheet" href="font-awesome/css/font-awesome-ie7.min.css" />
<link href="style-metro.css" rel="stylesheet" type="text/css"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="select2_metro.css" />
<link rel="stylesheet" href="DT_bootstrap.css" />
<script src="jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>
<script type="text/javascript" src="DT_bootstrap.js"></script>
三、html部分代码
<div class="page-content">
<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid">
<!-- BEGIN PAGE CONTENT-->
<div class="row-fluid">
<div class="span12">
<!-- BEGIN EXAMPLE TABLE PORTLET-->
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="icon-globe"></i>Responsive Table With Expandable details</div>
<div class="tools">
<a href="javascript:;" class="reload"></a>
<a href="javascript:;" class="remove"></a>
</div>
</div>
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
<thead>
<tr>
<th style="width:10%">Index</th>
<th style="width:30%">Rendering engine</th>
<th style="width:30%">Browser</th>
<th style="width:30%" class="hidden-480">Platform(s)</th>
<!--<th class="hidden-480">Engine version</th>-->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- END PAGE CONTENT-->
</div>
<!-- END PAGE CONTAINER-->
</div>
四、js部分
<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>
五、实例下载地址：http://download.csdn.net/detail/zdx1515888659/8216709
（尽量自己整理，上传的时候也就1 、2积分的东西被改成了40多分）
448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
