当前位置：Gxlcms > JavaScript > 完美实现bootstrap分页查询_javascript技巧

完美实现bootstrap分页查询_javascript技巧

时间：2021-07-01 10:21:17 帮助过：6人阅读

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

1、引入的css样式
我们需要引入bootstrap自带的表格样式，这样比较好看，如果再需要修改的话，我们就在其基础上再改。

2、需要的HTML文本
这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。


学生违纪信息
<%-- <%@ include file="/common.jsp"%> --%>

<%@ include file="/bootstrap.jsp"%>



 
  
  
  
   
    
    
   　　    
    
  
  
 

 
  
  
   
    学生违纪信息
     
      
       学号
       姓名
       考试科目
       考场号
       班级
       监考人员
      
      
      
     
   
  
 

 
 
 
  
   
    
     每页
     
      条记录
    
   
  
  
  
   显示第 1 至 10 项记录，共 57 项
  
  
  
   
    
     ← 上一页
     
      
     
     下一页 →

3、相应的js代码
这里包含了模糊查询事件，回车事件，上一步，下一步，选择页，选择每页显示条数等常用功能，后期再补充排序和选择列的显示和隐藏等。

输出"显示第 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

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

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

完美实现bootstrap分页查询_javascript技巧

人气教程排行