首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

完美实现bootstrap分页查询

Posted in Javascript onDecember 09, 2015

最近，开始我们的Java项目，要求尽量使用bootstrap，因为它比easyUI要好看的多。然后就开始上网查，边查边做，虽然我们引入了一些bootstrap的样式，但是并没有js代码，所有的功能都需要自己用js做。其实并不难，只要我们明白分页的实质就行。说了这么多，就让我们看看分页查询的表格是怎么做出来的吧。
先上效果图：

完美实现bootstrap分页查询

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>

      经过这些天的努力，实现了最基本的分页查询功能，还包括上一页、下一页以及选择跳页的效果，而且可以进行模糊查询，而且如果记录小于5条就不会产生分页等。后期再加上排序，选择列的显示和影藏就更好了。我们需要做的还很多，只要我们努力，就一定能够做到。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容，希望对大家的学习有所帮助。

完美实现bootstrap分页查询

- Author -

十期-崔晓光

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
jQuery.clean使用方法及思路分析
Jan 07 Javascript
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
Mar 04 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
浅谈在node.js进入文件目录的问题
May 13 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
JavaScript脚本库编写的方法
Dec 09 #Javascript
js省市联动效果完整实例代码
Dec 09 #Javascript
JavaScript知识点整理
Dec 09 #Javascript
js实现跨域访问的三种方法
Dec 09 #Javascript
详解js跨域原理以及2种解决方案
Dec 09 #Javascript
深入探讨前端框架react
Dec 09 #Javascript
JavaScript中rem布局在react中的应用
Dec 09 #Javascript
JAVA(88) Springboot-cli(1) format(1) CompletableFuture(1) 异步回调(1) 主题(1) ForkJoin(1) Android(19) FutureTask(3) 底部导航(1)
You might like
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
Jquery 监视按键，按下回车键触发某方法的实现代码
2014/05/11 Javascript
Nodejs实现批量下载妹纸图
2015/05/28 NodeJs
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python操作Access数据库基本步骤分析
2016/09/19 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
浅谈python可视化包Bokeh
2018/02/07 Python
Python 中 function(#) (X)格式 和 (#)在Python3.*中的注意事项
2018/11/30 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
python操作excel让工作自动化
2019/08/09 Python
Python版中国省市经纬度
2020/02/11 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
python实现处理mysql结果输出方式
2020/04/09 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
国际鲜花速递专家：Floraqueen
2016/11/24 全球购物
Parfumdreams芬兰：购买香水和化妆品
2021/02/13 全球购物
美国滑板店：Tactics
2020/11/08 全球购物
澳大利亚在线划船、露营和钓鱼商店：BCF Australia
2020/03/22 全球购物
环境工程大学生个人的自我评价
2013/10/08 职场文书
简历自荐信
2013/12/02 职场文书
政法大学毕业生自荐信范文
2014/01/01 职场文书
自荐信需注意事项
2014/01/25 职场文书
广告设计应届生求职信
2014/03/01 职场文书
大学班级文化建设方案
2014/05/06 职场文书
党员弘扬焦裕禄精神思想汇报
2014/09/10 职场文书
机器人总动员观后感
2015/06/09 职场文书