datatables信息展开或折叠资源-CSDN文库

共43个文件

scss：9个

less：9个

css：7个

datatables

需积分: 49 77 浏览量 2017-10-09 14:25:24 上传评论收藏 550KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

datatables行分组信息展开或折叠.zip （43个子文件）

datatables行分组信息展开或折叠

style.css.bak 103KB

datatables expandable details.html 8KB

bootstrap.min.css 104KB

select2_metro.css 14KB

datatables expandable details.html.bak 8KB

DT_bootstrap.css 4KB

style-metro.css 14KB

jquery.dataTables.min.js 69KB

效果图.jpg 197KB

DT_bootstrap.js 4KB

bootstrap.min.js 28KB

select2-spinner.gif 2KB

jquery-1.10.1.min.js 91KB

style.css 103KB

font-awesome

less

variables.less 9KB

icons.less 17KB

font-awesome-ie7.less 19KB

bootstrap.less 2KB

core.less 2KB

path.less 742B

mixins.less 1KB

extras.less 2KB

font-awesome.less 1KB

css

font-awesome-ie7.min.css 37KB

Descr.WD3 104B

font-awesome.css 22KB

font

FontAwesome.otf 60KB

Descr.WD3 446B

fontawesome-webfont.svg 193KB

fontawesome-webfont.ttf 77KB

fontawesome-webfont.eot@ 25KB

fontawesome-webfont.eot 37KB

fontawesome-webfont.woff 43KB

scss

_path.scss 753B

_icons.scss 17KB

_extras.scss 2KB

_core.scss 2KB

_mixins.scss 1KB

font-awesome-ie7.scss 22KB

_variables.scss 8KB

_bootstrap.scss 2KB

font-awesome.scss 1KB

datatable-row-openclose.png 299B

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> datatables-行详细内容的展开与折叠 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <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" /> <style> .gray{ background-color: #D8D8D8; color: #333333; } .div_left{ width: 45%; float: left; text-align:right; padding-right:4%; } .div_center{ width: 2%; float: left; color: #999999; font-size: 24px; font-weight: lighter; } .div_right{ width: 45%; float: left; text-align:left; padding-left:4% } </style>  </head> <body class="page-full-width">  <div class="page-content">  <div class="container-fluid">  <div class="row-fluid"> <div class="span12">  <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>  </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div>  </div>  </div>  <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> <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"); // alert($(this).attr("data_id")); //oTable.fnOpen( nTr, // 调用方法显示详细信息 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>';

评论收藏

内容反馈