地图集web项目_技术学习（二）_bootstrap分页的例子

最新推荐文章于 2019-01-28 22:26:19 发布

智慧地球（AI·Earth）社区

最新推荐文章于 2019-01-28 22:26:19 发布

阅读量692

点赞数

分类专栏： Web开发文章标签： bootstrap 分页例子 video audio

本文链接：https://blog.csdn.net/qq_36396104/article/details/78154232

版权

Web开发专栏收录该内容

37 篇文章 0 订阅

订阅专栏

这里写图片描述
1、引入的css样式

我们需要引入bootstrap自带的表格样式，这样比较好看，如果再需要修改的话，我们就在其基础上再改。

<link rel="stylesheet" type="text/css" href="uploads/rs/238/n8vhm36h/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="uploads/rs/238/n8vhm36h/bootstrap-responsiv.css">
<link rel="stylesheet" type="text/css" href="htuploads/rs/238/n8vhm36h/dataTables.bootstra.css">

2、需要的HTML文本

这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。

<meta charset="UTF-8">
<title>学生违纪信息</title>
<%-- <%@ include file="/common.jsp"%> --%>
<!-- 封装的一些bootstrap的样式 -->
<%@ include file="/bootstrap.jsp"%>
</head>
<body>

 <!-- 搜索区域 -->
  <div class="row" style="padding-bottom: 20px;margin-top:20px;">
  <!-- 搜索框的长度为该行的3/4 -->
  <div class="col-md-9">
   <div class="input-group">
    <input id="searchString" type="text" style="height:28px;" class="form-control" placeholder="请输入实体名">
    <span class="input-group-btn">
   　　    <button type="button" class="btn btn-info" onclick="search()" onkeypress="Enter()">
      <span class="glyphicon glyphicon-search" aria-hidden="true"/>
      搜索
     </button>
    </span>
  </div>
  </div>
 </div>

 <!-- 表格显示 -->
  <div class="row">
  <div class="col-md-12" style="margin-top:20px;">
   <div class="panel panel-info">
    <div class="panel-heading">学生违纪信息</div>
     <table id="table" class="table table-striped table-bordered table-hover datatable">
      <thead id="tem">
       <th id="studentId">学号</th>
       <th id="studentName">姓名</th>
       <th id="courseId">考试科目</th>
       <th id="examRoomId">考场号</th>
       <th id="className">班级</th>
       <th id="teacherId">监考人员</th>
      </thead>
      <tbody>
      </tbody>
     </table>
   </div>
  </div>
 </div>

 <!-- 页面底部显示 -->
 <!-- 每页显示几条记录 -->
 <div id="bottomTool" class="row-fluid" >
  <div class="span6" style="width:25%;;margin-right: 10px;">
   <div class="dataTables_length" id="DataTables_Table_0_length">
    <label>
     每页
     <select id="pageSize" onchange="research()"
     aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
      <option selected="selected" value="10">10</option>
      <option value="25">25</option>
      <option value="50">50</option>
      <option value="100">100</option>
     </select>
      条记录
    </label>
   </div>
  </div>
  <!-- 显示第 1 至 10 项记录，共 57 项 -->
  <div class="span6" style="width:25%;" >
   <div id="DataTables_Table_0_info" class="dataTables_info">显示第 1 至 10 项记录，共 57 项</div>
  </div>
  <!-- 第2页 -->
  <div class="span6" style="width:30%;">
   <div class="dataTables_paginate paging_bootstrap pagination">
    <ul id="previousNext">
     <li onclick="previous()" class="prev disabled"><a id="previousPage" href="#">← 上一页</a></li>
     <div id="page" style="float:left;">
      <select id="pageNum" onchange="search()"
      style="width:50PX;margin-right:1px;" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
       <option selected="selected" value="1">1</option>
      </select>
     </div>
     <li class="next" onclick="next()"><a id="nextPage" href="#">下一页 → </a></li>
    </ul>
   </div>
  </div>

 </div>
</body>
</html>

3、相应的js代码

这里包含了模糊查询事件，回车事件，上一步，下一步，选择页，选择每页显示条数等常用功能，后期再补充排序和选择列的显示和隐藏等。

<script type="text/javascript">
 //初始化，加载完成后执行
 window.onload=function(){
  search();
 };
 //搜索按钮绑定回车事件
 document.onkeydown = function(event){
  if (event.keyCode == 13) {
   event.cancelBubble = true;
   event.returnValue = false;
   search();
  }
 } 

 //下一步
 function next(){
  //得到当前选中项的页号
  var id=$("#pageNum option:selected").val();
  //计算下一页的页号
  var nextPage=parseInt(id)+1;
  //得到select的option集合
  var list=document.getElementById("pageNum").options;
  //得到select中，下一页的option
  var nextOption=list[nextPage-1];
  //修改select的选中项
  nextOption.selected=true;
  //调用查询方法
  search();
 }

 //上一步
 function previous(){

  //得到当前选中项的页号
  var id=$("#pageNum option:selected").val();
  //计算上一页的页号
  var previousPage=parseInt(id)-1;
  //得到select的option集合
  var list=document.getElementById("pageNum").options;
  //得到select中，上一页的option
  var previousOption=list[previousPage-1];
  //修改select的选中项
  previousOption.selected=true;
  //调用查询方法
  search();
 }

 //修改每页显示条数时，要从第一页开始查起
 function research() {
  //得到select的option集合
  var list=document.getElementById("pageNum").options;
  //得到select中，第一页的option
  var nextOption=list[0];
  //修改select的选中项
  nextOption.selected=true;
  //调用查询方法
  search();
 }

 //搜索，模糊查询学生违纪信息
 function search(){
  //得到查询条件
  var searchString=$("#searchString").val();
  //得到每页显示条数
  var pageSize=$("#pageSize").val();
  //得到显示第几页
  var pageNum=$("#pageNum").val();

  $.ajax({
   type: "POST",
   async: false,
   url: "queryStudentDisciplineByPage",
   data:{"searchString":searchString,
     "pageSize":pageSize,
     "pageNum":pageNum,
    },
   dataType:"text",
   success: function (data) {

    //将json字符串转为json对象
    var pageEntity=JSON.parse(data);
    //得到结果集
    var obj=pageEntity["rows"];

    //将除模板行的thead删除，即删除之前的数据重新加载 
    $("thead").eq(0).nextAll().remove(); 
    //将获取到的数据动态的加载到table中 
    for (var i = 0; i < obj.length; i++) { 
     //获取模板行，复制一行 
     var row = $("#tem").clone(); 

     //给每一行赋值
     row.find("#studentId").text(obj[i].studentId); //学号
     row.find("#studentName").text(obj[i].studentName); //学生姓名 
     row.find("#courseId").text(obj[i].courseId);  //课程名称 
     row.find("#examRoomId").text(obj[i].examRoomId);  //考场号
     row.find("#className").text(obj[i].className);  //所属班级 
     row.find("#teacherId").text(obj[i].teacherId);  //监考教师Id

     //将新行添加到表格中 
     row.appendTo("#table"); 
    } 
    //当前记录总数
    var pageNumCount=pageEntity["total"];
    //当前记录开始数
    var pageNumBegin=(pageNum-1)*pageSize+1;
    //当前记录结束数
    var pageNumEnd=pageNum*pageSize
    //如果结束数大于记录总数，则等于记录总数
    if(pageNumEnd>pageNumCount){
     pageNumEnd=pageNumCount;
    }
    //得到总页数
    var pageCount;
    if(pageNumCount/pageSize==0){
     pageCount=pageNumCount/pageSize;
    }else{
     pageCount=Math.ceil(pageNumCount/pageSize);
    }

    //输出"显示第 1 至 10 项记录，共 57 项"
    document.getElementById("DataTables_Table_0_info").innerHTML=
     "显示第"+pageNumBegin.toString()
     +" 至 "+pageNumEnd.toString()
     +" 项记录，共 "+pageNumCount.toString()+" 项";

    //显示所有的页码数
    var pageSelect =document.getElementById("page");
    var pageOption="";
    var flag;
    //删除select下所有的option，清除所有页码
    document.getElementById("pageNum").options.length=0;
    for(var i=0;i<pageCount;i++){
     flag=(i+1).toString();
     var option;
     //如果等于当前页码
     if(flag==pageNum){
      //实例化一个option,则当前页码为选中状态
      option=new Option(flag, flag, false, true);
     }else{
      option=new Option(flag, flag, false, false);
     }
     //将option加入select中
     document.getElementById("pageNum").options.add(option);
    }

    //如果总记录数小于5条，则不显示分页
    if((pageNumCount-5)<0){
     document.getElementById("bottomTool").style.display="none";
    }else{
     document.getElementById("bottomTool").style.display="";
    }

    /**给上一步下一步加颜色**/
    //判断是否只有一页
    if(pageCount==1){

     //如果只有一页，上一步，下一步都为灰色
     $("#previousPage").css("color","#AAA");//给上一步加灰色
     $("#nextPage").css("color","#AAA");//给下一步加灰色
    }else if(pageNum-1<1){
     //如果是首页,则给上一步加灰色，下一步变蓝
     $("#previousPage").css("color","#AAA");//给上一步加灰色
     $("#nextPage").css("color","#00F");//给下一步加蓝色
    }else if(pageNum==pageCount){
     //如果是尾页,则给上一步加蓝色，下一步灰色
     $("#previousPage").css("color","#00F");//给上一步标签加蓝色
     $("#nextPage").css("color","#AAA");//给下一步标签加灰色
    }else{
     //上一步为蓝色，下一步为绿色
     $("#previousPage").css("color","#00F");//给上一步加蓝色
     $("#nextPage").css("color","#00F");//给下一步加蓝色
    }
   }
  });
 }

</script>

这个例子的很多代码可以直接拿过来用的，比如上下页等

后端controller：

    @RequestMapping(value={"/pager"},produces = {"application/json;charset=UTF-8"})
    @ResponseBody
    public Page selectByExample(Page<LangRes> page, LangRes langRes, Model model){
        model.addAttribute("langRes",langRes);
        LangResExample example = new LangResExample();
        LangResExample.Criteria c = example.createCriteria();
        if(langRes.getId()!=null){
            c.andIdEqualTo(langRes.getId());
        }
        if(langRes.getName()!=null){
            c.andNameEqualTo(langRes.getName());
        }
        if(langRes.getAudioName()!=null){
            c.andAudioNameEqualTo(langRes.getAudioName());
        }
        if(langRes.getVideoName()!=null){
            c.andVideoNameEqualTo(langRes.getVideoName());
        }
        if(langRes.getComment()!=null){
            c.andCommentEqualTo(langRes.getComment());
        }
        if(langRes.getPronunciation()!=null){
            c.andPronunciationEqualTo(langRes.getPronunciation());
        }
        if(langRes.getCatalog()!=null){
            c.andCatalogEqualTo(langRes.getCatalog());
        }
        if(langRes.getSpeaker()!=null){
            c.andSpeakerEqualTo(langRes.getSpeaker());
        }
        if (langRes.getDetailsId()!=null){
            c.andDetailsIdEqualTo(langRes.getDetailsId());
        }
        example.setOrderByClause(page.getPageSorts());
        return assuranceService.selectByExample(example, page);

    }

这里面当然在改代码的时候也遇到了很多的问题，我们项目的前端代码：

$.ajax({
            type: "POST",
            async: false,
            url: "http://localhost:8080/assurance/pager",
            data: {
                "pageSize": pageSize,
                "pageNo": pageNum
            },
            dataType: "json",//传回来的是一个json数据
            success: function (data) {

                //将json字符串转为json对象
                var pageEntity = data;
                console.log(pageEntity.content[0]);

在对json数据进行操作的时候没有注意后端给我返回的数据的格式与我要操作的数据的格式的不同导致走了很多弯路。我要取得的是content的数据，所以当我用pageEntity。length的时候就出现了错误，应该是PageEntity.content。length{“offset”:0,”limit”:2147483647,”pageNo”:1,”pageSize”:10,”custom”:null,”content”:[{“id”:”19”,”name”:”“,”audioName”:”“}

另外在往table里面放入video和audio的时候有一个小技巧：

var audio = "<audio src='${_LangResourceBaseUrl}/lang_audio/"+pageEntity.content[i]['audioName']+"' style='width: 100%' type ='audio/wav' preload='none' controls='controls'>您的浏览器不支持此元素</audio>'";

row.find("#audioName").html(audio);
audio元素是独立于javascript之外的，所以只能给html标签赋值，而不能直接通过javascript对其进行放入一个audio