<style>
.window {
z-index: 2;
margin-top: 10px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
height: 69%;
width: 80%;
background-color: #fff;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.43);
border-radius: 5px;
position: absolute;
left:8%;
display: none;
}
.window .topBar {
width: 100%;
height: 50px;
background-image: -webkit-linear-gradient(#d3d3d3, #c8c8c8);
background-image: linear-gradient(#fbdbd5, #c8c8c8);
border-bottom: 1px solid #808080;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-top-right-radius: 5px;
border-top-left-radius: 5px;
}
.window .topBar .shut {
height: 12px;
width: 12px;
background-color: #f1edec;
border-radius: 50%;
margin-left: 15px;
border: 1px solid #f1edec;
}
.window .text .text-inner h4,
.window .text .text-inner h1 {
margin: 15px;
}
#pageBox {
padding: 10px 0 0 0;
float:right;
margin-right:20px;
}
#pageBox span {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
color: #fff;
background: #08a586;
font-size: smaller;
}
#pageNav {
display: inline-block;
}
#pageNav a {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
color: #3a87ad;
text-decoration: none;
background: #f9e8e9;
}
#pageNav a.active, #pageNav a:hover {
background: #e03f3f;
color: #EFEFEF;
}
#prev:hover {
cursor: pointer;
}
#next:hover {
cursor: pointer;
}
</style>
<div class="window">
<div class="topBar">
<a href="#" class="shut"></a>
</div>
<div class="text">
<div>
<h4 style="text-align: center">Mac用户:<span id="macinfo" style="color: #1ab7ea;"></span>的广告信息</h4>
</div>
<table border='1' id="tables" cellpadding='1' cellspacing='0' style='width: 100%;text-align:center'>
<tr>
<th style="text-align:center">ID</th>
<th style="text-align:center">APP 包名</th>
<th style="text-align:center">版本号</th>
<th style="text-align:center">时间</th>
</tr>
</table>
<div id="pageBox">
<span id="prev">«</span>
<label id="pageNav"></label>
<span id="next">»</span>
</div>
</div>
</div>
{{--总统计--}}
<div class="row">
<div class="col-sm-12">
<div class="panel panel-default">
<div class="panel-heading">
List Groups
</div>
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
<h5>广告数据</h5>
<ul class="list-group list-group-minimal">
<li class="list-group-item"> <span class="badge badge-roundless badge-info">{{$tady_num}}</span> 今日广告 </li>
<li class="list-group-item"> <span class="badge badge-roundless badge-info">{{$num}}</span> 累计 </li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<marquee><h6 style="color: #5eb95e;">注意: 鼠标点击Mac地址，可以看到此用户广告的详细信息</h6></marquee>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">用户广告信息</h3>
<div class="panel-options">
<a href="#" data-toggle="panel"> <span class="collapse-icon">–</span> <span class="expand-icon">+</span> </a>
<a href="#" data-toggle="remove"> × </a>
</div>
</div>
<div class="panel-body">
<div id="example-1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
<div class="row">
<div class="col-xs-6">
<div class="dataTables_length" id="example-1_length">
</div>
</div>
<div class="col-xs-6">
<div id="example-1_filter" class="dataTables_filter">
</div>
</div>
</div>
<div id="example-1_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<table id="example-1" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="example-1_info" style="width: 100%;">
<thead>
<tr role="row">
<th rowspan="1" colspan="1">ID</th>
<th rowspan="1" colspan="1">MAC 用户</th>
<th rowspan="1" colspan="1">Pac Name</th>
<th rowspan="1" colspan="1">Version</th>
<th rowspan="1" colspan="1">Date</th>
</tr>
</thead>
<tbody>
@foreach($info as $v)
<tr role="row" class="odd">
<td>{{$v->id}}</td>
<td style="cursor:pointer;" id="mac">{{$v->mac}}</td>
<td>{{$v->pac_name}}</td>
<td>{{$v->version}}</td>
<td>@php echo Date('Y-m-d H:i:s',$v->addtime) @endphp</td>
</tr>
@endforeach
</tbody>
</table>
<div class="row">
<div class="col-xs-6">
<div class="dataTables_info" id="example-1_info" role="status" aria-live="polite">
{{--Showing 11 to 20 of 20 entries--}}
</div>
</div>
<div class="col-xs-6">
<div class="dataTables_paginate paging_simple_numbers" id="example-1_paginate">
<ul class="pagination">
{{ $info->links() }}
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="dataTables_info" id="example-1_info" role="status" aria-live="polite">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("td[id='mac']").each(function(){
$(this).click(function(){
$('.window').css({
display: 'block',
});
var mac = $(this).html();
$('#macinfo').html(mac);
$.ajax({
async: true,
data:{mac:mac},
type : "get",
url : "/ad/macinfos",
success : function(data)
{
var obj =data;
$.each(obj,function(key,val){
var str = "";
str += "<tr>";
str += "<td style='width:50px;'>" + val.id + "</td>";
// str += "<td>" + val.mac + "</td>";
str += "<td style='width:200px;'>" + val.pac_name + "</td>";
str += "<td style='width:100px'>" + val.version + "</td>";
str += "<td style='width:100px'>" + new Date(parseInt(val.addtime) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ') + "</td>";
str += "</tr>";
$("#tables").append(str);
});
//JQ 分页代码
$(function () {
tabPage({
pageMain: '.text',
pageNav: '#pageNav',
pagePrev: '#prev',
pageNext: '#next',
curNum: 31, /*每页显示的条数*/
activeClass: 'active', /*高亮显示的class*/
ini: 0/*初始化显示的页面*/
});
function tabPage(tabPage) {
var pageMain = $(tabPage.pageMain);
/*获取内容列表*/
var pageNav = $(tabPage.pageNav);
/*获取分页*/
var pagePrev = $(tabPage.pagePrev);
/*上一页*/
var pageNext = $(tabPage.pageNext);
/*下一页*/
var curNum = tabPage.curNum;
/*每页显示数*/
var len = Math.ceil(pageMain.find("tr").length / curNum);
/*计算总页数*/
var pageList = '';
/*生成页码*/
var iNum = 0;
/*当前的索引值*/
for (var i = 0; i < len; i++) {
pageList += '<a href="javascript:;">' + (i + 1) + '</a>';
}
pageNav.html(pageList);
/*头一页加高亮显示*/
pageNav.find("a:first").addClass(tabPage.activeClass);
/*******标签页的点击事件*******/
pageNav.find("a").each(function(){
$(this).click(function () {
pageNav.find("a").removeClass(tabPage.activeClass);
$(this).addClass(tabPage.activeClass);
iNum = $(this).index();
$(pageMain).find("tr").not(':first').hide();
for (var i = ($(this).html() - 1) * curNum; i < ($(this).html()) * curNum; i++) {
$(pageMain).find("tr").eq(i).show();
}
});
});
$(pageMain).find("tr").hide();
/************首页的显示*********/
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
/*下一页*/
pageNext.click(function () {
$(pageMain).find("tr").not(':first').hide();
if (iNum == len - 1) {
for (var i = (len - 1) * curNum; i < len * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum++;
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
// ini(iNum);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
/*上一页*/
pagePrev.click(function () {
$(pageMain).find("tr").not(':first').hide();
if (iNum == 0) {
for (var i = 0; i < curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
return false;
} else {
pageNav.find("a").removeClass(tabPage.activeClass);
iNum--;
pageNav.find("a").eq(iNum).addClass(tabPage.activeClass);
}
for (var i = iNum * curNum; i < (iNum + 1) * curNum; i++) {
$(pageMain).find("tr").eq(i).show()
}
});
}
});
}
});
});
});
//模仿mac 鼠标移入变成红色
//关闭弹窗
$('.shut').on('click', function() {
$('.window').css({
display: 'none',
});
$('.text').find('tr').not(":first").remove();
$('#macinfo').html('');
}).mouseover(function(){
$(this).css({'background-color':'#ff4646','border':'1px solid #ff4646'});
}).mouseout(function(){
$(this).css({'background-color':'#f1edec','border':'1px solid #f1edec'});
});
</script>
