erdangjiade.com
/
Account_Details.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Cache-Control" content="no-siteapp" />
 <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="css/style.css"/>
        <link href="assets/css/codemirror.css" rel="stylesheet">
        <link rel="stylesheet" href="assets/css/ace.min.css" />
        <link rel="stylesheet" href="font/css/font-awesome.min.css" />
        <!--[if lte IE 8]>
		  <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
		<script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/jquery.SuperSlide.2.1.1.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/typeahead-bs2.min.js"></script>
		<script src="assets/js/jquery.dataTables.min.js"></script>
		<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
        <script src="assets/layer/layer.js" type="text/javascript" ></script>
        <script src="assets/laydate/laydate.js" type="text/javascript"></script>
        <script src="js/lrtk.js" type="text/javascript" ></script>
<title>详细</title>
</head>

<body>
<div class="margin clearfix">
<div class="Account_style">
<!--账户基本信息-->
 <div class="Manager_style clearfix">
    <span class="title_name">账户基本信息</span>
    <div class="Account_Balance">
     <h4>账户余额(￥)</h4>
     <h2>32345.67</h2>
     <h6>2016-7-21</h6>
    </div>
    <ul class="Account_info">
     <li><label class="label_name">账户名（用户名）：</label><span class="content">化海天堂</span></li>
     <li><label class="label_name">用户注册时间：</label><span class="content">2016-3-12</span></li>
     <li><label class="label_name">账户开通时间：</label><span class="content">2016-4-12</span></li>
     <li><label class="label_name">账户状态：</label><span class="content">启用</span></li>
    </ul>

 </div>
 <!--记录-->
 <div class="recording_style">
  <div id="recording">
  <div class="hd"><ul><li>充值记录</li><li>消费记录</li></ul></div>
   <div class="bd">
    <ul class="">
       <div class="Records"><span>共345条记录</span></div>
       <table class="table table-striped table-bordered table-hover" id="sample-table">
      <thead>
		 <tr>
          <th width=""><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
          <th width="">充值序号</th>
          <th width="">充值金额</th>
          <th width="">充值方式</th>
          <th width="">充值时间</th>
          <th width="">状态</th>
          <th>备注</th>
          </tr>
      </thead>
	<tbody>
		<tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值成功</td>
        <td></td>
        </tr>
        	<tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-7-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>100.00</td>
        <td>支付宝</td>
        <td>2016-4-21</td>
        <td>充值成功</td>
        <td></td>
        </tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>5667675756756</td>
        <td>200.00</td>
        <td>支付宝</td>
        <td>2016-4-21</td>
        <td>充值失败</td>
        <td>充值发生异常，无法完成充值。</td>
        </tr>
        </tbody>
        </table>
    </ul>
    <ul class="">
       <div class="Records"><span>共345条记录</span></div>
       <table class="table table-striped table-bordered table-hover" id="sconsumption-table">
      <thead>
		 <tr>
          <th width=""><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
          <th width="">订单编号</th>
          <th width="">订单名称</th>
          <th width="">商品数量</th>
          <th width="">消费金额</th>
          <th width="">消费时间</th>
          <th width="">状态</th>
          <th>备注</th>
          </tr>
      </thead>
	<tbody>
		<tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>手机数码消费</td>
        <td>3</td>
        <td>231.90</td>
        <td>2016-7-21</td>
        <td>成功</td>
        <td></td>
        </tr>
        	<tr>
        <tr>
        <td><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
        <td>4546464654654</td>
        <td>手机数码消费</td>
        <td>3</td>
        <td>231.90</td>
        <td>2016-7-21</td>
        <td>失败</td>
        <td>订单过期</td>
        </tr>
        </tbody>
        </table>
    </ul>
   </div>
  </div>
 </div>
 <script type="text/javascript">jQuery("#recording").slide({trigger:"click" });</script>
</div>
</div>
</body>
</html>

<script type="text/javascript">
jQuery(function($) {
		var oTable1 = $('#sample-table').dataTable( {
		"aaSorting": [[ 1, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"bAutoWidth":true,
		"bFilter":false,
		"aoColumnDefs": [
		  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
		  {"orderable":false,"aTargets":[0,1,2,3,5,6]}// 制定列不参与排序
		] } );
		var recording = $('#sconsumption-table').dataTable( {
		"aaSorting": [[ 1, "desc" ]],//默认第几个排序
		"bStateSave": true,//状态保存
		"bAutoWidth":true,
		"bFilter":false,
		"aoColumnDefs": [
		  {"orderable":false,"aTargets":[0,1,2,3,5,6,7,8]}// 制定列不参与排序
		] } );

				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});

				});
});

</script>