按起止時間查詢資料並實現“上拉顯示更多”
阿新 • • 發佈：2019-02-06
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/icons-extra.css" rel="stylesheet" /> <link rel="stylesheet" type="text/css" href="css/mui.picker.min.css" /> <style> html, body, .mui-content { height: 0px; margin: 0px; background-color: #efeff4; } h5.mui-content-padded { margin-left: 3px; margin-top: 20px !important; } h5.mui-content-padded:first-child { margin-top: 12px !important; } .mui-btn { font-size: 16px; padding-left: 18px; padding-right: 18px; margin: 3px; } .ui-alert { text-align: center; padding: 20px 10px; font-size: 16px; } * { -webkit-touch-callout: none; -webkit-user-select: none; } h4 { font-size: 16px; } </style> </head> <body> <div class="mui-content"> <div class="mui-content-padded "> <div class="mui-card"> <div class="mui-input-row" style="padding: 5px;"> <label>起始日期</label> <input readonly="readonly" type="text" class="ddate mui-input-clear" placeholder="點選選擇起始日期" id='pickDateBtnStart' data-options='{"type":"date","beginYear":2017,"endYear":2019}' style="border: none;"> </div> </div> <div class="mui-card"> <div class="mui-input-row" style="padding: 5px;"> <label>截止日期</label> <input readonly="readonly" type="text" class="ddate mui-input-clear" placeholder="點選選擇結束日期" id='pickDateBtnStop' data-options='{"type":"date","beginYear":2017,"endYear":2019}' style="border: none;"> </div> </div> <div class="mui-button-row"> <button id="confirmBtn" type="button" class="mui-btn mui-btn mui-btn-primary ">提 交</button> </div> </br> <div id="pullrefresh"> <ul id="alreadyVerifyTransportList" class="mui-table-view own-gray-color"> </ul> </div> </div> </div> <script src="js/mui.min.js"></script> <script src="js/own.js" charset="UTF-8"></script> <script src="js/mui.picker.min.js"></script> <script type="text/javascript"> mui.init({ swipeBack: false, pullRefresh: { container: '#pullrefresh', // down: { // contentdown: '下拉可重新整理', // contentover: '釋放立即重新整理', // contentrefresh: '正在載入..', // callback: pulldownRefresh // }, up: { contentrefresh: '正在載入..', contentnomore: '沒有更多資料了', callback: pullupRefresh } } }); var alreadyVerifyTransportList; var page = 1;//查詢記錄的當前頁碼 var pages = 0;//查詢記錄總頁數 var s = ''; var recordamount;//查詢記錄總條數 var recordperpage=3;//查詢記錄每頁顯示條數 mui.plusReady(function() { wishListwebview = plus.webview.currentWebview(); var alreadyVerifyTransportList = document.getElementById('alreadyVerifyTransportList'); plus.webview.currentWebview().addEventListener('hide', function() { document.getElementById("pickDateBtnStart").value=''; document.getElementById("pickDateBtnStop").value=''; alreadyVerifyTransportList.innerHTML=''; }, false); }); mui(".ddate").each(function() { var textControl = this; textControl.addEventListener('tap', function() { mui('#pullrefresh').pullRefresh().disablePullupToRefresh(); var optionsJson = this.getAttribute('data-options') || '{}'; var options = JSON.parse(optionsJson); var id = this.getAttribute('id'); var picker = new mui.DtPicker(options); picker.show(function(rs) { textControl.value = rs.text; picker.dispose(); mui('#pullrefresh').pullRefresh().enablePullupToRefresh(); }); }, false); }); document.getElementById("confirmBtn").addEventListener('tap', function() { infoStart = document.getElementById("pickDateBtnStart").value; infoStop = document.getElementById("pickDateBtnStop").value if(!infoStart || infoStart.trim() == "") { alert("請選擇起始時間！") } else { if(!infoStop || infoStop.trim() == "") { alert("請選擇截止時間！") } else { loadData(infoStart, infoStop, 1); mui('#pullrefresh').pullRefresh().refresh(true); } } }, false); function loadData(infoStart, infoStop, page) { var address = 'backstage/tsg/searcholdauditinfo'; var baseurl= geturl(); var finalurl = baseurl + address; mui.ajax({ url:finalurl, //url: 'http://10.1.138.223:8080/JYSystem/backstage/boundlist/listboundinfo', data: JSON.stringify({ starttime: infoStart, endtime: infoStop, pagesize: 3,//查詢記錄每頁顯示條數，即recordperpage pageindex: page//查詢記錄的當前頁碼，初始為1 }), dataType: 'json', //伺服器返回json格式資料 type: 'post', //HTTP請求型別 timeout: 10000, //超時時間設定為10秒； headers: { 'Content-Type': 'application/json' }, success: function(data) { //伺服器返回響應，根據響應結果，分析是否登入成功； var alreadyVerifyTransportList = document.getElementById('alreadyVerifyTransportList'); recordamount = data.total; //查詢記錄總條數 pages=Math.ceil(recordamount/3);//查詢記錄總條數除以每頁顯示條數後向上取整，得到顯示總頁數 if(page == 1) s = ""; total = data.data.length; //當前頁面資料條數 if((page == 1)&&(total== 0)){ s = '<li class="mui-table-view-cell" style="font-size: 14px;text-align: center;">沒有已審資料</li>'; //document.getElementById("pullrefresh").style.display = 'none'; mui('#pullrefresh').pullRefresh().disablePullupToRefresh(); } if(total > 0) { for(var i = 0; i <total; i++) { var currentRow = data.data[i]; s = s + '<li class="mui-table-view-cell">'; s = s + '<h4>車號：' + currentRow.car_no; s = s + '， 磅單號：' + currentRow.pound_seq_no + '</h4>'; s = s + '<h5>請求時間：' + currentRow.requesttime + '</h5>'; s = s + '<h5>請求人：' + currentRow.requester+ '</h5>'; s = s + '<h5>稽核時間：' + currentRow.audittime+ '</h5>'; s = s + '<h5>稽核結果：' + currentRow.auditstate+ '</h5>'; s = s + '</li>'; } //alreadyVerifyTransportList.innerHTML = s; //localStorage.setItem("total", total); } else { //alreadyVerifyTransportList.innerHTML = '<li class="mui-table-view-cell" style="font-size: 14px;text-align: center;">沒有已發貨物資料</li>'; //localStorage.setItem("total", 0); //s = s +'<li class="mui-table-view-cell" style="font-size: 14px;text-align: center;">沒有更多資料</li>'; } alreadyVerifyTransportList.innerHTML = s; }, error: function(xhr, type, errorThrown) { //異常處理； localStorage.setItem("total", 0); mui.toast('獲取資料失敗'); } }); } // function pulldownRefresh() { // // setTimeout(function() { // getPickerdata(); // setTimeout(function() { // getlist('1'); // }, 100); // mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); // }, 1000); // } function pullupRefresh() { var copythis = this; if(pages && page < pages) { page += 1; loadData(infoStart, infoStop, page); copythis.endPullupToRefresh(false); } else { page = 1; setTimeout(function() { copythis.endPullupToRefresh(true); } );} } </script> </body> </html>