ajax js ssm实现bootstrap视频分页

引入要用的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="#">&laquo;</a></li>
//这里根据视频个数生成页数,例如<li><a href=""#>1</li>,但页面先不写，用js判断视频个数来生成 



   <li id="fenyenumber"><a href="#">&raquo;</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'>&nbsp;"
                                        + data[i]['vtime']
                                        + "&nbsp;</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'>&nbsp;"
                                    + data[i]['vtime']
                                    + "&nbsp;</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';
            }
        }
    }

至此分页功能实现。效果如下。

ajax js ssm实现bootstrap视频分页

猜你喜欢