首页
所有分类
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 相关文章推荐
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
基于jQuery的星级评分插件
Aug 12 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
jquery submit ie6下失效的原因分析及解决方法
Nov 15 Javascript
浅谈jQuery构造函数分析
May 11 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
基于slideout.js实现移动端侧边栏滑动特效
Nov 28 Javascript
xmlplus组件设计系列之下拉刷新（PullRefresh)（6）
May 03 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
vue使用微信扫一扫功能的实现代码
Apr 11 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 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
我的世界(1) Docker(14) 巫师(1) 最终幻想(1) 小缇娜的奇幻之地(1) 暴雪(1) 守望先锋(1) 艾尔登法环(1) 东方异文石(1) 帝国时代(1)
You might like
php include和require的区别深入解析
2013/06/17 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
BOOM vs RR BO5 第一场 2.14
2021/03/10 DOTA
JavaScript 学习技巧
2010/02/17 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
2013/09/24 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
jquery多级树形下拉菜单的实例代码
2019/07/09 jQuery
Vue element-ui父组件控制子组件的表单校验操作
2020/07/17 Javascript
Python连接DB2数据库
2016/08/27 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python分割指定页数的pdf文件方法
2018/10/26 Python
django+echart绘制曲线图的方法示例
2018/11/26 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
Pytorch之finetune使用详解
2020/01/18 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
2019/02/13 HTML / CSS
护理学毕业生求职信
2013/11/14 职场文书
数据保密承诺书
2014/06/03 职场文书
迟到检讨书2000字（精选篇）
2014/10/07 职场文书
给客户的感谢信
2015/01/21 职场文书
车辆挂靠协议书
2016/03/23 职场文书
成人成长感言如何写？
2019/08/16 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle