页面效果：
layui 包：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=9"> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=1190"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0"> --> <title>*****</title> <link href="common/css/bootstrap.min2.css" rel="stylesheet"> <link rel="stylesheet" href="./css/****.css"> <!--表格控件--> <script src="common/js/jquery-1.12.0.min.js"></script> <script src="common/js/jquery.cookie.js"></script> <script src="common/js/bootstrap.min.js"></script> <link href="common/css/bootstrap-table.min.css" rel="stylesheet" /> <script src="common/js/bootstrap-table.min.js"></script> <script src="common/js/bootstrap-table-zh-CN.min2.js"></script> <!--layuiz遮罩层--> <script src="layui/layui.all.js"></script> <script src="layui/css/layui.css"></script> <style type="text/css"> .pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover { background-color: #cbb486; border-color:#cbb486; } .pagination>li>a, .pagination>li>span { color: #999; } </style> </head> <body> <div id="container"> <iframe class="customHeader_iframe" scrolling="no" src="https://*****/****/head/head.jsp"></iframe> <div class="banner"> <div class="new-common-content"> <h3 class="banner-tit">*******</h3> </div> </div> <div id="main" class="new-common-content contentBox"> <div class="filter clearfix"> <div id="first" class="pull-left"> <div class="type pull-left active">查询类型：</div> <ul id = "ul1" class="filter-list pull-left"> <li class="filter-item1 active" value = "1">****查询</li> <li class="filter-item1 " value = "2">****查询</li> <li class="filter-item1 " value = "3">****查询</li> <li class="filter-item1 " value = "4">****查询</li> <li class="filter-item1 " value = "5">****查询</li> <li class="filter-item1 " value = "6">****查询</li> </ul> </div> <div id="second" class="pull-left"> <div class="type pull-left active">查询区域：</div> <div id ="bx" class="all pull-left active">不限</div> <ul id = "ul2" class="filter-list pull-left "> <!-- <li class="filter-item active" value = "不限">不限</li> --> <li class="filter-item2 " value = "1">浦东新区</li> <li class="filter-item2 " value = "2">黄浦区</li> <li class="filter-item2 " value = "3">静安区</li> <li class="filter-item2 " value = "4">宝山区</li> <li class="filter-item2 " value = "5">崇明区</li> <li class="filter-item2 " value = "6">长宁区</li> <li class="filter-item2 " value = "7">奉贤区</li> <li class="filter-item2 " value = "8">虹口区</li> <li class="filter-item2 " value = "9">嘉定区</li> <li class="filter-item2 " value = "10">金山区</li> <li class="filter-item2 " value = "11">闵行区</li> <li class="filter-item2 " value = "12">普陀区</li> <li class="filter-item2 " value = "13">青浦区</li> <li class="filter-item2 " value = "14">松江区</li> <li class="filter-item2 " value = "15">徐汇区</li> <li class="filter-item2 " value = "16">杨浦区</li> </ul> </div> <div class="more pull-right open"><span>收起</span></div> </div> <!-- 跳转地图页面 --> <div class="search"> <a class="pull-right to-map" href="http://******/views/map/getMap.jsp"> <img src="./images/loaction.png" alt=""> <span>前往地图</span> >> </a> </div> <!-- 被放弃的 提交按钮 （现在是 点击任何一个 查询类型 或 查询区域 都触发 后台调用） 按钮获取鼠标焦点 是一种颜色，失去焦点是另一种颜色： onmouseover="this.style.backgroundColor=\'#000\'" onmouseout="this.style.backgroundColor=\'#fff\'" 下面用的是背景渐变色 ：backgroundImage <div class="button-bar" style="text-align:center"> <button class="btn-golden btn-lg btn-danger " onmouseover="this.style.backgroundImage=\'linear-gradient(to right,#b99,#b991)\';" onmouseout="this.style.backgroundImage=\'linear-gradient(to right, rgb(228, 201, 149), rgb(185, 145, 106))\';" onclick="search()" id="chaxun" type ="button">查询</button> </div> --> <br/><br/> //数据展示表格： <table id="WRYList_Table"></table> </div> <iframe class="customFooter_iframe" scrolling="no" src="https://*********/foot/foot.html" frameborder="0"></iframe> </div> </body> </html> <script> var data; //3条默认数据 var workApplyData = [{"name":"上海市黄浦区********","address":"黄浦区**街道**路**弄**号","hotline":"021-*******"},{"name":"上海市黄浦区********","address":"黄浦区**街道**路**弄**号","hotline":"021-*******"},{"name":"上海市黄浦区********","address":"黄浦区**街道**路**弄**号","hotline":"021-*******"}]; //加载页面显示默认数据 $(function () { data= workApplyData; //调用table表格 加载默认数据 Load_WRYTable(); }); //点击任何一个 查询类型 按钮 $(".filter-item1").click(function(){ //去掉 查询类型 下 所有按钮的选中状态 $("#ul1 li").removeClass("active"); //给当前选中的 查询类型 加选中状态 $(this).addClass("active"); //调用后台接口 search(); }); $(".filter-item2").click(function(){ //去掉 不限 按钮的选中状态 $("#bx").removeClass("active"); //去掉 查询区域 下 所有按钮的选中状态 $("#ul2 li").removeClass("active"); //给当前选中的 查询区域 加选中状态 $(this).addClass("active"); //调用后台接口 search(); }); $("#bx").click(function(){ //去掉 查询区域 下 所有按钮的选中状态 $("#ul2 li").removeClass("active"); //增加 不限 按钮的选中状态 $("#bx").addClass("active"); //调用后台接口 search(); }); //提交申请 function search() { //开启 layui 遮罩层 var index = layer.open({ type : 3, //遮罩层 上面显示的 加载中 图片 title : false, time : 300000 //遮罩层关闭时间 }); //获取 查询类型 的 value（1/2/3，..） 和 查询区域 的文本内容 （区名） var fwjg = $("#ul1 .active").val(); var qx = $("#ul2 .active").text(); $.ajax({ type: "POST", dataType: "json", async: true, url: \'http://localhost:8080/*********/Search.do\', data: { "fwjg":fwjg, "qx":qx, }, success: function (fhdata) { data = fhdata.data; //关闭遮罩层 layer.close(index); //调用table表格 加载后台返回数据 Load_WRYTable(); }, error : function(err) { console.log(err); alert("系统繁忙，请稍候再试！"); data= workApplyData; //关闭遮罩层 layer.close(index); //调用table表格 加载默认数据 Load_WRYTable(); } }); } function Load_WRYTable() { //layer.close(index); var $WryList = $("#WRYList_Table"); $WryList.bootstrapTable(\'destroy\'); $WryList = $("#WRYList_Table").bootstrapTable({ method: \'post\', contentType: "application/json;charset=UTF-8", //必须要有！！！！ striped: false, //是否显示行间隔色 classes: \'table table-hover table-Vmid\', pageNumber: 1, //初始化加载第一页，默认第一页 data: data,//josn数据包 //queryParamsType: \'limit\', //查询参数组织方式 //queryParams: Total_TaskList_queryParams, //请求服务器时所传的参数 pagination: true, //是否分页 sidePagination: \'client\', //分页方式：client客户端分页，server服务端分页（*） pageSize: 10, //单页记录数 pageList: [5, 10, 25, 100], //分页步进值 search: true, showRefresh: false, //刷新按钮 showColumns: false, clickToSelect: true, //是否启用点击选中行 toolbarAlign: \'center\', //工具栏对齐方式 //buttonsAlign: \'right\', //按钮对齐方式 toolbar: \'#wryList_toolbar\', //指定工作栏 onLoadSuccess: function (status) { //加载成功时执行 alert("数据加载成功 " + status); }, onLoadError: function (status) { //加载失败时执行 alert("数据加载失败 " + status); }, columns: [ { title: \'机构名称\', field: \'name\', width: 60, height: 40, }, { title: \'咨询电话\', field: \'hotline\', width: 10, height: 40, }, { title: \'机构地址\', field: \'address\', width: 100, height: 40, }, ], locale: \'zh-CN\', //中文支持, responseHandler: function (res) { //在ajax获取到数据，渲染表格之前，修改数据源 return res; }, }); } //查询区域的 展开、收起 $(\'.filter .more span\').on(\'click\',function () { var text = $(\'.more span\').text(); if (text === \'展开\') { $(\'.more span\').text(\'收起\'); } else { $(\'.more span\').text(\'展开\'); } $(\'.more\').toggleClass(\'open\'); $(\'.filter-list\').toggleClass(\'active\'); }) $(\'.filter-list .filter-item\').on(\'click\',function () { $(this).parents(\'#second\').children(\'.all\').removeClass(\'active\'); $(this).siblings().removeClass(\'active\'); $(this).addClass(\'active\'); }) $(\'.filter .all\').on(\'click\',function () { $(this).addClass(\'active\'); $(this).next().children().removeClass(\'active\') }) </script>