页面效果：
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', 60, height: 40, }, { title: '咨询电话', field: 'hotline', 10, height: 40, }, { title: '机构地址', field: 'address', 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>