在jQuery datatable中实现灯箱效果的图片轮播

最新推荐文章于 2021-08-31 16:24:25 发布
Nightliar
最新推荐文章于 2021-08-31 16:24:25 发布
阅读量1.3k
点赞数
分类专栏： jQuery datatable 文章标签：轮播 jQuery
本文链接：https://blog.csdn.net/Nightliar/article/details/68484443
版权
jQuery datatable 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="stylesheet" type="text/css" href="${base}/static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="${base}/static/lib/Hui-iconfont/1.0.7/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="${base}/static/lib/icheck/icheck.css" />
	<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/skin/default/skin.css" id="skin" />
	<link rel="stylesheet" type="text/css" href="${base}/static/h-ui.admin/css/style.css" />
	<link rel="stylesheet" type="text/css" href="${base}/static/css/snsCustomer.css" />
	<link href="${base}/static/lib/lightbox2/2.8.1/css/lightbox.css" rel="stylesheet" type="text/css" >
	<title>商品评论管理</title>
</head>
<!-- 写点样式，让轮播好看点 -->
<style>
ul, ol {padding:0;}
.banner {position:relative;overflow:auto;text-align:center;}
.banner li {list-style: none;}
.banner ul li {float: left;}
.dots{position:absolute;bottom:10px;left:0;right:0;}  
.dot{
    display:inline-block;  
    width:10px;  
    height:10px;  
    font-size:0px;  
    line-height:0px;  
    margin-right:12px;  
    cursor:pointer;  
    background-color:#fff;  
    border-radius:8px;  
}  
ul{text-align:center}
.dot.active{background-color: #cce8cf;}  
</style>

<body>
	<nav class="breadcrumb"> <i class="Hui-iconfont"></i> 首页
		<span class="c-gray en">></span> 评论管理
		<span class="c-gray en">></span> 商品评论管理
		<a class="btn btn-success radius r mr-20" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新"> <i class="Hui-iconfont"></i>
		</a>
	</nav>
	<div class="pd-20">
		<div class="text-c">
<!-- 		日期范围： -->
<!-- 		<input type="text" οnfοcus="WdatePicker({maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}'})" id="startTime" class="input-text Wdate" style="width:120px;"> - -->
<!-- 		<input type="text" οnfοcus="WdatePicker({minDate:'#F{$dp.$D(\'startTime\')}',maxDate:'%y-%M-%d'})" id="endTime" class="input-text Wdate" style="width:120px;"> -->
			<input type="text" class="input-text" style="width:120px" placeholder="商品id" id="bizId" name="">
			<input type="text" class="input-text" style="width:250px" placeholder="输入评论内容关键字" id="keywords" name="">
			<button type="submit" class="btn btn-success radius" id="_search" name="">
			<i class="Hui-iconfont"></i>
			搜内容
		</button>
			<button type="submit" class="btn btn-success radius" id="_reset" name="">
			<i class="Hui-iconfont"></i>
			重置
		</button>
		</div>
		<div class="mt-20">
			<table id="commentProductDg" class="table table-border table-bordered table-hover table-bg table-sort">
				<thead>
					<tr class="text-c">
						<th width="25"><input type="checkbox" name="" value=""></th>
						<th width="50">id</th>
						<th width="100">商品id</th>
						<th width="100">评论用户id</th>
						<th width="200">评论内容</th>
						<th width="180">评论图片</th>
						<th width="100">创建时间</th>
				    	<th width="80">操作</th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	<script type="text/javascript" src="${base}/static/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="${base}/static/lib/layer/2.4/layer.js"></script>
	<script type="text/javascript" src="${base}/static/lib/lightbox2/2.8.1/js/lightbox-plus-jquery.min.js"></script> 
	<script type="text/javascript" src="${base}/static/lib/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript" src="${base}/static/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="${base}/static/h-ui/js/H-ui.js"></script>
	<script type="text/javascript" src="${base}/static/h-ui.admin/js/H-ui.admin.js"></script>
	<script type="text/javascript" src="${base}/static/js/common/dateUtil.js"></script>
	<script type="text/javascript" src="${base}/static/js/common/StringUtil.js"></script>
	<script type="text/javascript" src="${base}/static/lib/unslider/unslider.min.js"></script>
	<script type="text/javascript">
		var productCommentTable;
		$(function() {
			productCommentTable = $("#commentProductDg").DataTable({
				'fnDrawCallback': function(table) {  
		            $("#commentProductDg_paginate").append("  到第 <input type='text' id='changePage' class='input-text bk-gray radius' style='width:50px;height:27px'> 页  <a class='btn btn-primary  bk-gray radius size-S' href='javascript:void(0);' id='dataTable-btn'>确认</a>");  
		            var oTable = $("#commentProductDg").dataTable();  
		            $('#dataTable-btn').click(function(e) {  
		                if($("#changePage").val() && $("#changePage").val() > 0) {  
		                    var redirectpage = $("#changePage").val() - 1;  
		                } else {  
		                    var redirectpage = 0;  
		                }  
		                oTable.fnPageChange(redirectpage);  
		            });  
		            //图片轮播
				    $('.banner').unslider({
				    	delay: 2500,
						dots: true,
						fluid: true
				 	});
					$(".banner").css("width","100%");
		        },
				'serverSide': true,
				'paging': true,
				'autoWidth': true,
				'lengthMenu': [10, 20, 50, 100],
				'lengthChange': true,
				'searching': false,
				"ordering": false,
				'info': true,
				'ajax': {
					'url': '/comment/listComment.do',
					'type': 'post',
					'data': function(data) {
						data.keywords = $('#keywords').val();
						data.bizId = $.trim($('#bizId').val());
						data.type = 1;
// 						data.startTime = $('#startTime').val();
// 						data.endTime = $('#endTime').val();
					}
				},
				'columns': [{
					'data' : null , 'visible' : true
				},{
					'data': 'id'
				},{
					'data': 'bizId'
				},{
					'data': 'memberId'
				},{
					'data': 'content'
				},{
					'data': 'imgUrlCombo'
				},{
					'data': 'createTime'
				},{
					'data': null
				}],
				'columnDefs': [{
					'targets' : 0,
					'render' : function(data, type, row){
						var html = '<input type="checkbox" value={0} name="checkBox" pid='+row.id+'></td>';
						return StringUtil.format(html,data.id);
					}
				},{
					'targets': 5,
					'render':function(data,type,row){
						var html ='';
						if(data !=null && data !=''){
							return changePic(data);
						}
				        return html;
					}
				},{
					'targets': [6],
					'render': function(data, type, row) {
						return dateUtil.format(new Date(data), 'yyyy-MM-dd hh:mm:ss');
					}
				},{
					'targets': -1,
					'render': function(data, type, row) {
						var html = '';
						html += '<a title="回复此评论" href="javascript:;" οnclick="productComment_reply(\'编辑\','+row.id+')" class="ml-5" style="text-decoration:none">';
						html += '<i class="Hui-iconfont"></i>';
						html += '</a>';
						html += '<a title="删除" href="javascript:;" οnclick="productComment_delete(this,'+row.id+')" class="ml-5" style="text-decoration:none">';
						html += '<i class="Hui-iconfont"></i>';
						html += '</a>';
						return StringUtil.format(html);
					}
				}],
				'createdRow': function(row, data, dataIndex) {
					$(row).addClass('text-c');
				}
			});

			$('#_search').on('click', function() {
				_search();
			});

			$('#_reset').on('click', function() {
				$('#keywords').val('');
				$('#bizId').val('');
			});
		});

		function _search() {
			productCommentTable.ajax.reload();
		}

		/*商品评论-删除*/
		function productComment_delete(obj, id) {
			layer.confirm('确认 要删除吗？', function(index) {
				$.ajax({
				    type: "post",
					url: "/comment/commentDelete",
					data: {
						"commentId":id,
						"type":1
					},
					dataType : "json",
					success:function(data){
						if( data.code == 200){
							layer.msg('已删除!',{icon:1,time:1000});
							productCommentTable.draw(false);
						}else{
							layer.msg('删除失败');
						}
					}
				});
			});
		}

		/*商品评论-编辑*/
		function productComment_reply(title,id) {
			layer_show('编辑商品评论回复', '/comment/comment_reply?id=' + id + '&type=1', '650', '650');
		}
		
		function changePic(p){
			var pics= new Array(); //定义一数组 
			pics=p.split(","); //字符分割 
			html ='';
		   	html += '<div class="banner"><ul>';
			for (i=0;i<pics.length ;i++ ){ 
		   	   html +='<li><div class="picbox"><a data-lightbox="worksPics" data-title="评论图片" href="${imageDomain}/'+pics[i]+'"><img style="height:200px;width:160px" class="img-responsive" id="pic" src="${imageDomain}/'+pics[i]+'" /></a></div></li>';
		    }
		   	html +='</ul></div>';
		   	return html;
		}
		
	</script>
</body>
</html>