1.最终效果图展示:
2.代码截图:
3.代码文字:
<!DOCTYPE HTML>
<HTML>
<head>
<meta charset="utf-8">
<meta name="keywords" content="分页教程">
<meta name="description" content="CSDN平台分页功能相互学习">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="msapplication-tap-highlight" content="no">
<!-- 移动web页面自动探测电话号码 -->
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta http-equiv="Content-Security-Policy" content="">
<meta http-equiv="cleartype" content="on">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="app-version" content="1.13.3">
<meta name="author" content="xin xiao yong">
<title>分页</title>
<link rel="stylesheet" href="bootstrap.min.css">
<!-- 网页标题图标 -->
<link rel="icon" href="active_img/logo.ico" type="image/x-icon">
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="common.js" type="text/javascript"></script>
<script src="browser_check.js" type="text/javascript"></script>
<script src="mui.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
</head>
<BODY>
<! - html部分 - >
<table id =“Allactivities”class =“table text-center table-bordered blue”>
<thead>
<tr>
<th> Id
<th>发布人</>第>
<TH>邀请方</次>
<TH>标题</次>
<TH>开始时间</次>
<TH>结束时间</次>
<TH>活动地点</次>
<TH>活动类型</次>
<th>联系电话</ th>
<th>人数限制</ th>
<th>内容</ th>
<th>操作</ th>
展示设置</ th>
</ tr>
</ THEAD>
<TBODY>
</ TBODY>
<TFOOT>
<TR>
<TD类=“中心” NOWRAP =“真”列跨度=“8”风格=“边界:无;”>
<DIV ID =“PAGE-
TRUN “> 总共<跨度类=‘toastRecords’> </跨度>条记录&NBSP;
分为<跨度类=‘toastpages’> </跨度>页&NBSP;
当前为第<跨度类=‘pageCurrent’> </ span>页面&nbsp;
每页<span class =“pagesize”> </ span>条记录&nbsp;
<
<a href="#" id="firstPage">首页</a>
<a href="#" id="prevPage">上一页</a>
<a href =“#”id =“nextPage” >下一页</a>
<a href="#"id=" lastPage">末页</a>
<select id =“gotoPage”onchange =“getId(value)”> </ select>
</ span >
</ div>
</ td>
</ tr>
</ tfoot>
</ TABLE>
<! - js部分 - >
<script type =“text / javascript”>
//分页列表
getSystemActivityList();
函数getSystemActivityList(){
$ .ajax({
type:“POST”,
url:“后台提供的分页数据接口”,
data:{curpage:$('.pageCurrent').text(),pagesize:10},
success :function(data){
//console.log (data ,“活动数据列表分页”);
if(data.code == 200){
//后天返回总记录数
var R = data.count;
// console。 log(R,“后台返回的总记录数”);
//当前页
var C = 1;
var B;
//每页显示记录数
var S = 10;
//显示总记录数
。$( “toastRecords”)文本(R);
//显示当前页数据
。$( “pageCurrent”)文本(C);
//每页显示数据的数量
。$( “页面大小”)文本(S);
//页码选择框
var option ='';
//判断是否总记录数/每页显示数据量是否可以整除
if(R%S == 0){//偶数页
B = parseInt(R / S);
for(var i = 1; i <= B; i ++){
option + ='<option value ='+ i +'
}
} else {//奇数页
B = parseInt(R / S);
for(var i = 1; i <= B; i ++){
option + ='<option value ='+ i +'>'+ i +'</ option>'
}
}
//显示分页的数据
$(“。toastpages” )的.text(B);
//显示选择菜单的数据
$( “#GotoPage记述”)HTML(可选)。
} else {
$(“#Allactivities tbody”)。html('');
}
}
});
};
$(”
var C = $(“。pageCurrent”)。text();
//获取select的值
函数getId(value){
C = value;
$( “pageCurrent”)文本(C)。
systemActivity_list()
};
//(首页按钮点击事件
$(“#firstPage”)。on(“click”,function(e){
e.preventDefault();
C = 1;
$(“.pageCurrent”).text(C);
$( “#gotoPage”)。val(C)
systemActivity_list();
}); on(“click”,function(e){ e.preventDefault(); if(parseInt($(“.pageCurrent”)。text())>
//上一页按钮点击事件
$(“#prevPage” 1){ C = parseInt($(“。
C = 1;
};
$( “pageCurrent”)文本(C)。
$( “#GotoPage记述”)VAL(C)。
systemActivity_list();
});
//(下一页按钮点击事件
$(“#nextPage”)。on(“click”,function(e){
e.preventDefault();
if(parseInt($(“.pageCurrent”).text())< parseInt($(“。toastpages”)。text())){
C = parseInt($(“.pageCurrent”)。text())+ 1;
} else {
C = $(“。toastpages”)。text );
};
$(“。pageCurrent”).text(C);
$(“#gotoPage”).val(C);
systemActivity_list()
});
e.preventDefault();
C = $( “toastpages。”)文本()。
$( “pageCurrent”)文本(C)。
$( “#GotoPage记述”)文本(C)。
systemActivity_list();
});
//活动数据列表
函数systemActivity_list(){
$ .ajax({
type:“POST”,
url:“后台返回的显示数据”,
data:{curpage:$('.pageCurrent')。text(),pagesize: 10},
success:function(data){
//console.log (data ,“全部系统活动”);
if(data.code == 200){//判断前端否请求是否成功,后台是否顺利返回数据
var html =“”;
//循环后台返回的json对象格式数据
for(var i = 0; i <data.infor.length; i ++){
var data_infor = data.infor [i];
if(data_infor.charges == 0){
data_infor.charges =“免费”;
}
//模板字符串动态加载数据列表
的HTML + =`
<TR>
<TD风格= “填充:4像素;”> $ {data_infor.id} </ TD>
<TD> $ {data_infor.staff_id} </ TD>
<td title =“$ {data_infor.inviter}”> $ {data_infor.inviter} </ td>
<td title =“$ {data_infor.subject}”>
<td title =“$ {data_infor.start_time}”> $ {data_infor.start_time} </ td>
<td title =“$ {data_infor.end_time}”> $ {data_infor.end_time} </ td>
<td title = “$ {data_infor.active_place}”> $ {data_infor.active_place} </ td>
<td> $ {data_infor.charges} </ td>
<td title =“$ {data_infor.mobile}”> $ {data_infor.mobile } </ td>
<td> $ {data_infor.limit_people} </ td>
<td title =“$ {data_infor.task_txt}”> $ {data_infor.task_txt} </ td>
<td>
<a class =“btn btn-info examine”style =“padding:0px;” data-toggle =“modal”data-target =“#addActive”>查看</a>
<a class="btn btn-primary deletedData" style="padding:0px;">删除</a>
</ td>
<td>
<a class =“btn btn-success showData”style =“padding:0px;” title =“$ {data_infor.is_show}”>设置</a>
<span class =“btn btn-warning”style =“color:blue; padding:1px”> $ {data_infor.is_show} </ span>
</ TD>
</ tr>
`;
}
//数据列表显示页面
$(“#Allactivities tbody”)。html(html);
} else {
toast(“网络错误,请检查!”);
}
}
});
}
//页面刚加载时显示全部系统活动
$(function(){
systemActivity_list();
});
</ script>
</ body>
</ html>
提示:。如果要复制该代码到本地运行,请注意更换'引用文件地址'和后台返回接口,否则会出现一系列跨域问题状语从句:资源找不到的问题。水平有限,本文档仅供初学者或首次开发提供参考。如代码有错误之处,请见谅。如果有更好的开发经验,谢谢回复。谢谢观看!