Perfect implementation of bootstrap paging query_javascript skills-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Perfect implementation of bootstrap paging query_javascript skills

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:27 PM

bootstrapPaging query

Recently, when we started our Java project, we requested to use bootstrap as much as possible because it is much more beautiful than easyUI. Then I started to search online and worked on it while searching. Although we introduced some bootstrap styles, there was no js code, and all functions needed to be done by ourselves using js. In fact, it is not difficult, as long as we understand the essence of paging. Having said that, let us see how the paging query form is made.
First the renderings:

1. Introduced css style
We need to introduce the table style that comes with bootstrap, which will look better. If we need to modify it again, we will modify it based on it.

<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. Required HTML text
What needs to be noted here is that the id and class name of each tag should not be changed randomly, because it corresponds to some js code and css styles. If the effect is not displayed, or the displayed effect is not what you want, we can make appropriate fine-tuning.

<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. Corresponding js code
This includes fuzzy query events, enter events, previous step, next step, page selection, selection of the number of items displayed on each page and other common functions. Sorting and display and hiding of selected columns will be added later.

<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>

After these days of hard work, we have realized the most basic paging query function, which also includes the effect of previous page, next page and selected page jump. Fuzzy query can also be carried out, and if there are less than 5 records, it will not occur. Pagination etc. It will be even better to add sorting later and display and hide the selected columns. We still have a lot to do, and as long as we work hard, we will be able to do it.

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Node.js Streams with TypeScriptApr 30, 2025 am 08:22 AM

Node.js excels at efficient I/O, largely thanks to streams. Streams process data incrementally, avoiding memory overload—ideal for large files, network tasks, and real-time applications. Combining streams with TypeScript's type safety creates a powe

Python vs. JavaScript: Performance and Efficiency ConsiderationsApr 30, 2025 am 12:08 AM

The differences in performance and efficiency between Python and JavaScript are mainly reflected in: 1) As an interpreted language, Python runs slowly but has high development efficiency and is suitable for rapid prototype development; 2) JavaScript is limited to single thread in the browser, but multi-threading and asynchronous I/O can be used to improve performance in Node.js, and both have advantages in actual projects.

The Origins of JavaScript: Exploring Its Implementation LanguageApr 29, 2025 am 12:51 AM

JavaScript originated in 1995 and was created by Brandon Ike, and realized the language into C. 1.C language provides high performance and system-level programming capabilities for JavaScript. 2. JavaScript's memory management and performance optimization rely on C language. 3. The cross-platform feature of C language helps JavaScript run efficiently on different operating systems.

Behind the Scenes: What Language Powers JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript runs in browsers and Node.js environments and relies on the JavaScript engine to parse and execute code. 1) Generate abstract syntax tree (AST) in the parsing stage; 2) convert AST into bytecode or machine code in the compilation stage; 3) execute the compiled code in the execution stage.

The Future of Python and JavaScript: Trends and PredictionsApr 27, 2025 am 12:21 AM

The future trends of Python and JavaScript include: 1. Python will consolidate its position in the fields of scientific computing and AI, 2. JavaScript will promote the development of web technology, 3. Cross-platform development will become a hot topic, and 4. Performance optimization will be the focus. Both will continue to expand application scenarios in their respective fields and make more breakthroughs in performance.

Python vs. JavaScript: Development Environments and ToolsApr 26, 2025 am 12:09 AM

Both Python and JavaScript's choices in development environments are important. 1) Python's development environment includes PyCharm, JupyterNotebook and Anaconda, which are suitable for data science and rapid prototyping. 2) The development environment of JavaScript includes Node.js, VSCode and Webpack, which are suitable for front-end and back-end development. Choosing the right tools according to project needs can improve development efficiency and project success rate.

Is JavaScript Written in C? Examining the EvidenceApr 25, 2025 am 12:15 AM

Yes, the engine core of JavaScript is written in C. 1) The C language provides efficient performance and underlying control, which is suitable for the development of JavaScript engine. 2) Taking the V8 engine as an example, its core is written in C, combining the efficiency and object-oriented characteristics of C. 3) The working principle of the JavaScript engine includes parsing, compiling and execution, and the C language plays a key role in these processes.

JavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

See all articles