<!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 name="renderer" content="webkit"> <meta name="viewport" content="width=1190"> <title>#####</title> <link href="common/css/common.css" rel="stylesheet"> <link href="common/css/Default_bootstrap4.css" rel="stylesheet" /> <link href="common/css/custom.min.css" rel="stylesheet" /> <script src="common/js/jquery-1.10.2.min.js"></script> <script src="common/js/jquery.cookie.js"></script> <script src="common/js/bootstrap.min.js"></script> <link href="common/css/new-common.css" rel="stylesheet" /> <!--表格控件--> <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> </head> <body style="background-color: #ffffff"> <iframe class="customHeader_iframe" scrolling="no" src="###############" style="border:none;100%;height:140px;overflow:hidden;"></iframe> <br /> <br /> <div style="padding: 0px 450px;" > <h3 class="PrimaryTitle" style="text-align: center;padding:10 20px;font-size:25px;Height:50px">######</h3> <form id="form" > <div class="apply-box"> <div class="apply-box-item"> <div class="form-group"> <label for="inputCompany" class="col-sm-4 control-label"><span class="text-danger"></span>###：</label> <div class="col-sm-5" > <input style="height:35px; 200px" type="text" class="form-control" id="name" name="name" onblur="name();" value=""> <span id = "na" class="help-block2" style = "display : none;">  请输入###</span> </div> </div> </br></br></br> <div class="form-group"> <label for="inputCompany" class="col-sm-4 control-label"><span class="text-danger"></span>####：</label> <div class="col-sm-5" > <input style="height:35px; 200px" type="text" class="form-control" id="id" name="id" onblur="id();" value=""> <span id = "i" class="help-block2" style = "display : none;">  请输入####</span> </div> <br /> <br /> <div class="button-bar" style="text-align:center"> <!-- button 按钮的选中和移出 变色问题 --> <button class="btn-golden btn-lg btn-danger " onmouseover="this.style.backgroundImage='linear-gradient(to right,#b9916a,#b9916a)';" onmouseout="this.style.backgroundImage='linear-gradient(to right, rgb(228, 201, 149), rgb(185, 145, 106))';" onclick="search()" id="lg" type ="button">查询</button> </div> </div> </div> </div> </form> <table id="WRYList_Table"></table> </div> <br /> <br /> <iframe class="customHeader_iframe" scrolling="no" src="##############" style="border:none;100%;height:193px;overflow:hidden;"></iframe> </body> </html> <script type="text/javascript"> var data; //读取txt文件数据 $(function () { var xhr = new XMLHttpRequest(); //txt数据文件跟本jsp页面在同一目录下 xhr.open("get", "./******.txt", true); xhr.send(); xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { //xhr.responseText 是文件里的全内容，这里转成了数组； data=eval('(' + xhr.responseText + ')'); Load_WRYTable(); } else if(xhr.status == 404) { console.log(xhr.status); } }; }); //提交申请 function search() { $("#lg").text("查询中..."); $.ajax({ type: "POST", dataType: "json", async: true, url: webRoot + '*********', data: $('#form').serialize(), success: function (fhdata) { if(fhdata.data=="err"){ alert("请正确填写查询信息！"); $("#lg").text("查询"); }else{ data = fhdata.data; Load_WRYTable(); $("#lg").text("查询"); } }, error : function(err) { console.log(err); alert("系统繁忙，请稍候再试！"); $("#lg").text("查询"); } }); } function Load_WRYTable() { console.log(data); 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: '####1', field: '****1', 60, height: 40, }, { title: '####2', field: '****2', 10, height: 40, }, { title: '####3', field: '****3', 100, height: 40, }, { title: '####4', field: '****4', 20, height: 40, }, ], locale: 'zh-CN', //中文支持, responseHandler: function (res) { //在ajax获取到数据，渲染表格之前，修改数据源 return res; }, }); } </script>