ajax無重新整理分頁實現 帶例項呦
阿新 • • 發佈：2019-02-13
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>上海市水利工程建設市場信用資訊管理平臺</title>
<link rel="stylesheet" href="./slxy/css/cheshi.css">
<script src="./slxy/js/jquery-1.11.3.min.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var pageNo = 1;//第幾頁
var pageSize = 10;//每頁顯示條數
var pages=0; //總頁數
$(document).ready(function(){
loadData(pageNo, pageSize);
});
function loadData(pageNo, pageSize){
$(".detail").remove(); //每次重新從 API 資料介面獲取資料都要先清除原先表格 `<tr>` 的內容
$.ajax({
type: "post",
url:"http://31.16.10.95:9080/code/sportal/shsl/queryAllCorporation?access_token=[b36680850768ff1b]",
dataType: "jsonp",
data:{
params:{}
},
contentType: "application/json;charset=utf-8", //記住加上charset=utf-8，否則Ajax請求有可能會報SCRIPT7002錯誤
success: function(json){
var cs = json.data;
var totalCount = cs.length;//總條數
pages = Math.ceil(totalCount / pageSize);//總頁數
if(cs.length != 0){
var html = '';
if (pageNo == 1) { // 當前頁
for(var i=0; i<pageSize; i++){
html += '<tr>';
html += '<td>' + Number(i+1) + '</td>';
html += '<td>' + cs[i].dglcorporation_businesscode + '</td>';
html += '<td>' + cs[i].dglcorporation_governingunit + '</td>';
}
}
else if(pageNo<pages){
for(var j=pageSize*pageNo-pageSize; j<pageSize*pageNo; j++){
html += '<tr>';
html += '<td>' + Number(j+1)+ '</td>';
html += '<td>' + cs[j].dglcorporation_businesscode + '</td>';
html += '<td>' + cs[j].dglcorporation_governingunit + '</td>';
}
}else if(pageNo=pages){//最後一頁
for(var j=pageSize*pageNo-pageSize; j<cs.length; j++){
html += '<tr>';
html += '<td>' + Number(j+1)+ '</td>';
html += '<td>' + cs[j].dglcorporation_businesscode + '</td>';
html += '<td>' + cs[j].dglcorporation_governingunit + '</td>';
}
}
$('#body_xmxx').html(html);
displayFooter(totalCount, pages, pageNo);
} else{
$("#table").hide();
$("#footer").hide();
}
},
error:function(){
//error handle function
}
});
}
function displayFooter(totalCount, pages, pageNo){
var newText = '共' + totalCount + '條，' + '第' + pageNo + '頁，' + '共' + pages + '頁';
$("#summary").text(newText);
}
$("input[name='page_num']").keydown(function(e){
if(e.keyCode == 13){
$("input[name='go_btn']").click();
}
});
$("input[name='go_btn']").click(function(){
var goPage = $("input[name='page_num']").val();
if(goPage >= 1 && goPage <=pages && goPage != pageNo){
pageNo = goPage;
loadData(pageNo, pageSize);
} else{
return false;
}
});
;
//跳轉點選事件
var tz=function(){
var goPage = $("input[name='page_num']").val();
if(goPage >= 1 && goPage <=pages && goPage != pageNo){
pageNo = goPage;
loadData(pageNo, pageSize);
} else{
return false;
}
}
//首頁事件
var dyy=function(){
pageNo = 1;
loadData(pageNo, pageSize);
}
//上一頁點選事件
var sy=function(){
if(pageNo == 1){
return false;
} else{
pageNo--;
loadData(pageNo, pageSize);
}
}
//下一頁點選事件
var xy=function(){
if(pageNo == pages){
return false;
} else{
pageNo++;
loadData(pageNo, pageSize);
}
}
//最後一頁點選事件
var zh=function(){
pageNo = pages;
loadData(pageNo, pageSize);
}
</script>
</head>
<body>
<div id="table">
<table>
<col width="19%">
<col width="19%">
<col width="19%">
<col width="19%">
<col width="24%">
<tr>
<th>編號</th>
<th>公司名稱</th>
</tr>
<tbody id="body_xmxx">
</tbody>
</table>
</div>
<div id="footer">
<span id="summary"></span>
<ul id="pagination">
<li id="01" onclick="dyy()">首頁</li>
<li id="02" onclick="sy()">上一頁</li>
<li id="03" onclick="xy()">下一頁</li>
<li id="04" onclick="zh()">最後一頁</li>
</ul>
<div id="select">
<span>跳轉到 </span>
<input type="text" name="page_num">
<span> 頁 </span>
<input type="button" name="go_btn" onclick="tz()" value="跳轉">
</div>
</div>
</div>
</script>
</body>
</html>