引入要用的js和css
<link rel="stylesheet" href="bootstrap.css" />
<script src="jquery-1.9.1.js"></script>
<script src="bootstrap.js" /></script>
UserController
通过后台video.do 查询存在mysql数据库的视频地址list集合
//获取视频列表 @RequestMapping(value = "/video.do") @ResponseBody public List<Video> video(Video video, Model model) { List<Video> v = userService.findvideo(); for (int i = 0; i < v.size(); i++) { //测试能否成功获取到视频地址 System.out.println(v.get(i).getVurl()); System.out.println(v.get(i).getTime()); } return v; }
UserService
public List<Video> findvideo() { // TODO Auto-generated method stub return usermapper.findvideo(); }
UserMapper接口
public List<Video> findvideo();
userMapper.xml
<select id="findvideotext" resultType="domain.Video"> select * from t_video where text=#{0}; </select>
mysql数据库t_video表
前台页面lesson.html
//定位实现div重叠 #lesson{ position:relative; } #lesson .container{ position:absolute display:none; }
<div id="ye" class="container" style="border: 2px solid white;"> <div id="lesson" class="row"> //这里是放ajax获取到的视频,先不写布局,用js用过判断视频个数来生成 //用js生成<div class="container">来放分页视频,一个页面8个。通过点击下面的<li>标签来实现分页显示隐藏 </div> </div> <nav style="text-align: center"> <ul id="fenye" class="pagination "> <li ><a href="#">«</a></li> //这里根据视频个数生成页数,例如<li><a href=""#>1</li>,但页面先不写,用js判断视频个数来生成 <li id="fenyenumber"><a href="#">»</a></li> </ul> </nav>
前台ajax接收数据后在success里判断实现分页功能 ()
var Olesson = document.getElementById('lesson');
$ .ajax({ url : 'User/video.do', type : "post", dataType : "json", contentType: "application/json; charset=utf-8", async : false, success : function(data) { //自制分页 //根据视频个数创造分页页数 var str1= "<div class='container'></div>";//这个div用来保住每个分页的视频 var length = data.length;//这个是获取list视频的个数 var time = length / 8;//判断几个页面 time就是页数 ,除8是因为我的分页是一个分页8个视频 var b = 0; try{ //判断是否能整除排满页面,我设置的是一页8个视频 if(length-(time*8)!=0){ //如果视频不能被刚好铺满,就生成(time+1)个分页 for(var i=0;i<time+1;i++){ $("#lesson").append(str1); $("#fenyenumber").before("<li><a href=\"#\">"+(i+1)+"</a></li>"); } } else{ //能被整除就生成time个分页 for(var i=0;i<time;i++){ $("#lesson").append(str1); //在<ul id="fenye" class="pagination ">前添加分页 i代表分页个数 $("#fenyenumber").before("<li><a href=\"#\">"+(i+1)+"</a></li>"); } } var Ocontainer=Olesson.getElementsByClassName('container'); //获取id为lesson下的class=‘container’的div //循环添加视频到页面 for (var j = 0; j < time; j++) { for (var i = b; i < b + 8; i++) { //str为要添加的视频样式,可以自己改,下面是我自己的。 str = "<div class='col-md-3'><img src='" +data[i]['murl'] + "'" + "alt='" + data[i]['vurl'] + "'" +">" + "<div class='pull-right'> " + data[i]['vtime'] + " </div>" + "<h1 class='text-justify' title='"+ data[i]['text']+"'"+ ">" + data[i]['text'] + "</h1>" + "<span class='glyphicon glyphicon-play-circle'>" + data[i]['playback'] + "</span>" + "<span class='glyphicon glyphicon-time pull-right'>" + data[i]['time'] + "</span></div>"; $(Ocontainer[j]).append(str);//添加视频到div里 } b = b + 8; } //不能铺满一个页面的处理 if (length - (time * 8) != 0) { for (var i = (time * 8); i< data.length; i++) { str = "<div class='col-md-3'><img src='" + data[i]['murl'] + "'" + "alt='" + data[i]['vurl'] + "'" +">" + "<div class='pull-right'> " + data[i]['vtime'] + " </div>" + "<h1 class='text-justify' title='"+ data[i]['text']+"'"+ ">" + data[i]['text'] + "</h1>" + "<span class='glyphicon glyphicon-play-circle'>" + data[i]['playback'] + "</span>" + "<span class='glyphicon glyphicon-time pull-right'>" + data[i]['time'] + "</span></div>"; $(Ocontainer[Ocontainer.length]).append(str); } } }catch (err){ console.log("I don konw!"); } } }); //下面通过js实现点击li标签实现分页,就是js时间的基础,循环点击隐藏 var Ofen = document.getElementById('fenye'); var Olesson = document.getElementById('lesson'); var Oli=Ofen.getElementsByTagName('li'); // var Ocontainer=Oye.getElementsByTagName('div'); var Ocontainer=Olesson.getElementsByClassName('container'); //alert(Ocontainer.length); // alert(Oli.length); for(var j=0;j<Ocontainer.length;j++){ Ocontainer[j].index=j; Ocontainer[j].style.display='none'; } Ocontainer[0].style.display='block'; //li分页点击实现分页隐藏和显示,包括实现第一页和最后一页功能的实现. for(var i=0;i<Oli.length;i++){ Oli[i].index = i; Oli[i].onclick=function(){ var b = this.index; if(b==0){ for(var j=0;j<Ocontainer.length;j++){ Ocontainer[j].style.display='none'; } Ocontainer[0].style.display='block'; } if(b==Oli.length-1){ for(var j=0;j<Ocontainer.length;j++){ Ocontainer[j].style.display='none'; } Ocontainer[Ocontainer.length-1].style.display='block'; } else if(b!=0 && b!=Oli.length+1){ alert(b); for(var j=0;j<Ocontainer.length;j++){ Ocontainer[j].style.display='none'; } Ocontainer[b-1].style.display='block'; } } }
至此分页功能实现。效果如下。