首页
所有分类
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 相关文章推荐
利用jQuery接受和处理xml数据的代码(.net)
Mar 28 Javascript
js中方法重载如何实现？以及函数的参数问题
Aug 01 Javascript
使用javascript将时间转换成今天，昨天，前天等格式
Jun 25 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
Node.js之网络通讯模块实现浅析
Apr 01 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
Jul 22 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) SVN(1) 共享文件夹(1) localStorage(1) 横向滚动(1) caddy(1) NginxConfig(1) 表约束(2) ESXI(1) 加载异常(1)
You might like
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JScript 脚本实现文件下载 一般用于下载木马
2009/10/29 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
jQuery中.live()方法的用法深入解析
2013/12/30 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
2014/08/13 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
每天一篇javascript学习小结（Function对象）
2015/11/16 Javascript
继续学习javascript闭包
2015/12/03 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python SMTP实现发送带附件电子邮件
2018/05/22 Python
Tensorflow分类器项目自定义数据读入的实现
2019/02/05 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python3爬取torrent种子链接实例
2020/01/16 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
全面介绍python中很常用的单元测试框架unitest
2020/12/14 Python
迷你唐卡软皮鞋：Minnetonka Moccasin
2018/05/01 全球购物
Dr.Jart+美国官网：韩国药妆品牌
2019/01/18 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
JAVA软件工程师测试题
2014/07/25 面试题
模范家庭事迹材料
2014/02/10 职场文书
搞笑的获奖感言
2014/08/16 职场文书
关于诚信的活动方案
2014/08/18 职场文书
纪念九一八事变演讲稿：牢记历史，捍卫主权
2014/09/14 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
请客吃饭开场白
2015/06/01 职场文书
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
mysql 获取相邻数据项
2022/05/11 MySQL