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>
提示：。如果要复制该代码到本地运行，请注意更换'引用文件地址'和后台返回接口，否则会出现一系列跨域问题状语从句：资源找不到的问题。水平有限，本文档仅供初学者或首次开发提供参考。如代码有错误之处，请见谅。如果有更好的开发经验，谢谢回复。谢谢观看！
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
