地图集web项目_技术学习（二）

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中，下一页的optionvar 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中，上一页的optionvar previousOption=list[previousPage-1];//修改select的选中项previousOption.selected=true;//调用查询方法search();}//修改每页显示条数时，要从第一页开始查起function research() {//得到select的option集合var list=document.getElementById("pageNum").options;//得到select中，第一页的optionvar 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"})@ResponseBodypublic 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

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

react实战项目_前端学习路线图--从网页设计到项目开发
前端学习路线是螺旋上升的,需要耗费的时间和精力不比其他编程的少,由于其稳健性的特点,使其成为大多数企业开发的刚需编程语言.在网上看到有很多的前端学习路线图,但大部分的前端学习路线图是很零碎的,没有系统 ...
java项目_值得学习和练手的Java企业级开源项目，强烈推荐！
热门文章推荐:100本纸质书籍免费包邮!22款高颜值的终端工具,点燃了小姐姐对编程的热爱! 一条 SQL 引发的事故,同时小姐姐直接被开除!! 11月全国程序员平均工资新鲜出炉,内附封面图! 文末有彩 ...
关于Java Web项目的技术点探讨
目录一.目的二.技术点介绍 1.主要技术点 (1)在新技术不断涌现的背景下,大型网站架构自创立以来经历了不断的重塑.优化.功能拓展,首先对大型网站架构的变迁历程进行管窥蠡测. (2)在对上述架构变 ...
spring boot web项目_阿里技术专家带你使用Spring框架快速搭建Web工程项目
点击上方 "程序员小乐"关注, 星标或置顶一起成长第一时间与你相约每日英文 We all have a past. It's how you deal with it. 每个人 ...
简单有趣的web项目_有趣而简单的电子项目书
简单有趣的web项目 "当您去商店购买电子小物件时,您会想到自己可以自己做一个吗?或者甚至可以自己做一个有趣的事情?" 这就是约翰·贝希塔尔(John Baichtal)的面向初学 ...
linux下tomcat部署java web项目_在linux下用tomcat部署java web项目的过程与注意事项
在linux下用tomcat部署java web项目的过程与注意事项一.安装JDK 到http://www.oracle.com/technetwork/java/javase/downloads/ ...
Spring Boot 学习[四] web项目实战训练(增删改查,分页,排序)
Spring boot非常适合Web应用程序开发.您可以轻松创建自包含的HTTP应用.web服务器采用嵌入式Tomcat,或者Jetty等. 几点说明: Spring boot开发web项目,通常打成 ...
spring创建web项目_使用Spring WS创建合同优先的Web服务
spring创建web项目 1引言本文介绍了如何使用来实现和测试SOAP Web服务 Spring Web Services项目 . 本示例将JAXB2用于(取消)编组. 为了开发服务,我将使用合同 ...
idea自动构建web项目_构建Web应用程序以自动执行系统管理员任务
idea自动构建web项目系统管理员(sysadmin)每年在重复性任务上浪费数千小时. 幸运的是,使用开源工具构建的Web应用程序可以自动消除很大一部分痛苦. 例如,使用Python和JavaSc ...

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

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

最新文章

热门文章