<!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;width: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;width: 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;width: 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;width: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', width: 60, height: 40, }, { title: '####2', field: '****2', width: 10, height: 40, }, { title: '####3', field: '****3', width: 100, height: 40, }, { title: '####4', field: '****4', width: 20, height: 40, }, ], locale: 'zh-CN', //中文支持, responseHandler: function (res) { //在ajax獲取到數據，渲染表格之前，修改數據源 return res; }, }); } </script>