首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >bootstrap 查询 展示 分页 常用**

bootstrap 查询 展示 分页 常用**

作者头像
用户5760343
发布2019-07-05 12:07:49
2.2K0
发布2019-07-05 12:07:49
举报
文章被收录于专栏:sktjsktj

image.png

<!doctype html> <html> <head> <meta charset="utf-8"> <title>联想控股</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap-responsiv.css"> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstra.css"> </head> <body> <div class="container"> <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"/> 搜索 </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> <div class="span6" style="width:25%;" > <div id="DataTables_Table_0_info" class="dataTables_info">显示第 1 至 10 项记录,共 57 项</div> </div> <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> <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> </div> </body> </html>

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.06.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档