ajax无刷新分页实现带实例呦

最新推荐文章于 2022-05-04 10:28:10 发布

。度

最新推荐文章于 2022-05-04 10:28:10 发布

阅读量781

点赞数 2

文章标签： ajax 分页

本文链接：https://blog.csdn.net/qq_33238562/article/details/72959947

版权

<%@ 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>

<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" οnclick="dyy()">首页</li>
<li id="02" οnclick="sy()">上一页</li>
<li id="03" οnclick="xy()">下一页</li>
<li id="04" οnclick="zh()">最后一页</li>
</ul>
<div id="select">
<span>跳转到 </span>
<input type="text" name="page_num">
<span> 页 </span>
<input type="button" name="go_btn" οnclick="tz()" value="跳转">
</div>
</div>
</div>
</script>
</body>
</html>