完美实现bootstrap分页查询

前端之家收集整理的这篇文章主要介绍了完美实现bootstrap分页查询前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、引入的css样式

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

2、需要的HTML文本

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

Meta charset="UTF-8"> 学生违纪信息 <%-- <%@ include file="/common.jsp"%> --%> <%@ include file="/bootstrap.jsp"%>

<div class="row" style="padding-bottom: 20px;margin-top:20px;">

<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"/>
搜索

<div class="row">
<div class="col-md-12" style="margin-top:20px;">
<div class="panel panel-info">
<div class="panel-heading">学生违纪信息


<table id="table" class="table table-striped table-bordered table-hover datatable">
<thead id="tem">
<th id="studentId">学号
<th id="studentName">姓名
<th id="courseId">考试科目
<th id="examRoomId">考场号
<th id="className">班级
<th id="teacherId">监考人员

每页 条记录
显示第 1 至 10 项记录,共 57 项
IoUsNext">
  • IoUs()" class="prev disabled">
  • 3、相应的js代码

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

    后执行 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,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","#00F");//给下一步加蓝色
    }else if(pageNum==pageCount){
    //如果是尾页,则给上一步加蓝色,下一步灰色
    $("#prevIoUsPage").css("color","#00F");//给上一步标签加蓝色
    $("#nextPage").css("color","#AAA");//给下一步标签加灰色
    }else{
    //上一步为蓝色,下一步为绿色
    $("#prevIoUsPage").css("color","#00F");//给上一步加蓝色
    $("#nextPage").css("color","#00F");//给下一步加蓝色
    }
    }
    });
    }

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

    如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

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

    原文链接:https://www.f2er.com/bootstrap/51209.html
    bootstrapbootstrap分页查询

    猜你在找的Bootstrap相关文章