获取全部数据-分页显示功能
2018-03-13 09:53
295 查看
数据过多时我们用分页显示，大多数情况下我们可以跟后台协定规则分页，每次只请求当前页面数据进行展示。但如果我们是跟第三方合作进行数据获取而对方一次返回所有数据时前端需要获取全部数据然后分页展示，以下代码用于这种情况
代码如下：（用了rem做单位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>分页功能-获取所有数据</title>
</head>
<script>
function fontAuto(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + 'px';
}
fontAuto();
window.onresize=function () {
fontAuto();
}
</script>
<style>
.pages {
margin-right: 0rem;
position: relative;
margin-top: 0.3rem;
bottom: 0;
text-align: right;
font-size: 0.12rem;
padding: 3px;
}
.pages a {
border: 1px solid #0392db;
background: none;
color: #0392db;
padding: 0.04rem 0.08[b]rem;
margin: 2px;
margin-left: 6px;
text-decoration: none;
cursor: pointer;
}
.pages a.disabled {
color: #0392db;
font-size: 0.12rem;
cursor: default;
border: 1px solid #0392db;
background: none;
padding: 0.04rem 0.08rem;
}
.pages a.current {
color: #fff;
font-weight: bold;
background: #1d7bdf;
border-color: #1d7bdf;
}
.pages label {
color: #0392db;
}
.pages span {
font-size: 0.14rem;
color: #e65c00;
}
.pages input {
border: 1px solid #0392db;
background: none;
color: #0392db;
width: 0.6rem;
height: 0.24rem;
line-height: 0.24rem;
text-align:center;
}
.pages a:hover {
background: #1d7bdf;
color: #fff;
transition-duration: 0.2s;
}
</style>
<body>
<div class="table-wrap" style="margin:0;">
<ul id="view_list" class="view_list clearfix"></ul>
<div id="page" class="pages"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var picData;
var pageSize=8;//每页显示8条数据;
$.ajax({//ajax一次性获取后台数据
url: 'xxxxxxxxxxxx',
data: {},
type : "GET",
async : false,
success: function (resp) {
if(resp.success){
var res=resp.rows;//获取结果数组
if(res.length!=0){
picData=resp;
//分页计算
var page_html="";//插入分页HTML
page_html+='<a id="first_page" class="disabled">首页</a> <a id="last_page" class="disabled"><< 上一页</a>';
var totalPage=Math.ceil(resp.total/pageSize);//共分多少页
for(var i=0;i<totalPage;i++){
if(i==0){
page_html+='<a class="current index_btn current_page" pagenum="'+(parseInt(i)+1)+'">'+(parseInt(i)+1)+'</a>';
}else{
page_html+='<a class="index_btn" pagenum="'+(parseInt(i)+1)+'">'+(parseInt(i)+1)+'</a>';
}
}
page_html+='<a id="next_page">下一页 >></a><a id="end_page">末页</a>';
page_html+='<label>共 </label> <span>'+totalPage+'</span> <label> 页 </label> <span>'+resp.total+'</span><label> 条 </label> <label> 跳转到 </label> <input type="text" id="page_to" value="1"><label> 页 </label> <a id="page_to_btn">GO</a>';
$("#page").html(page_html);
var resArr=[];//每页显示的数据放入数组
if(res.length<pageSize){//如果数据总数小于设置的每页数据数则数组里只放所有数据
for(var i=0;i<res.length;i++){
resArr.push(res[i]);
}
}else{//如果数据总数大于设置的每页数据数则数组里只放要求的8条数据
for(var i=0;i<pageSize;i++){
resArr.push(res[i]);
}
}
picViewList(resArr);//数据填充进页面的方法
//分页-首页点击
$("#first_page").click(function(){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(0).addClass("current_page");
$(".index_btn").eq(0).addClass("current");
picViewList(resArr);
})
//分页-上一页点击
$("#last_page").click(function(){
var current_index=$(".current_page").attr("pagenum");
if(current_index!=1){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(current_index-2).addClass("current_page");
$(".index_btn").eq(current_index-2).addClass("current");
var first_index=(current_index-2)*pageSize;
//var last_index=first_index+pageSize-1;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
}else{
$(this).attr("disabled",true);
}
})
//分页-下一页点击
$("#next_page").click(function(){
var current_index=$(".current_page").attr("pagenum");
if(current_index!=totalPage){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(current_index).addClass("current_page");
$(".index_btn").eq(current_index).addClass("current");
var first_index=current_index*pageSize;
//var last_index=first_index+pageSize-1;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
}else{
$(this).attr("disabled",true);
}
})
//分页-末页点击
$("#end_page").click(function(){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(totalPage-1).addClass("current_page");
$(".index_btn").eq(totalPage-1).addClass("current");
var first_index=(totalPage-1)*pageSize;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
})
//分页-跳转到某页点击
$(".index_btn").click(function(){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(this).addClass("current_page");
$(this).addClass("current");
var current_index=$(this).attr("pagenum");
var first_index=(current_index-1)*pageSize;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
})
//分页-Go按钮点击
$("#page_to_btn").click(function(){
var go_v=$("#page_to").val();
var r = /^[0-9]*[1-9][0-9]*$/;//正整数
if(r.test(go_v) && go_v<=totalPage && go_v>0){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(go_v-1).addClass("current_page");
$(".index_btn").eq(go_v-1).addClass("current");
var current_index=$(".index_btn").eq(go_v-1).attr("pagenum");
var first_index=(current_index-1)*pageSize;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
}else{
alert('请输入正确跳转页数');
}
})
}else{
$("#page").html("");
}
}else{
alert("检索失败");
$("#page").html("");
}
}
});
function picViewList(data){//数据填充页面方法
}
</script>
</body>
</html>
代码如下：（用了rem做单位）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>分页功能-获取所有数据</title>
</head>
<script>
function fontAuto(){
document.documentElement.style.fontSize = document.documentElement.clientWidth/19.2 + 'px';
}
fontAuto();
window.onresize=function () {
fontAuto();
}
</script>
<style>
.pages {
margin-right: 0rem;
position: relative;
margin-top: 0.3rem;
bottom: 0;
text-align: right;
font-size: 0.12rem;
padding: 3px;
}
.pages a {
border: 1px solid #0392db;
background: none;
color: #0392db;
padding: 0.04rem 0.08[b]rem;
margin: 2px;
margin-left: 6px;
text-decoration: none;
cursor: pointer;
}
.pages a.disabled {
color: #0392db;
font-size: 0.12rem;
cursor: default;
border: 1px solid #0392db;
background: none;
padding: 0.04rem 0.08rem;
}
.pages a.current {
color: #fff;
font-weight: bold;
background: #1d7bdf;
border-color: #1d7bdf;
}
.pages label {
color: #0392db;
}
.pages span {
font-size: 0.14rem;
color: #e65c00;
}
.pages input {
border: 1px solid #0392db;
background: none;
color: #0392db;
width: 0.6rem;
height: 0.24rem;
line-height: 0.24rem;
text-align:center;
}
.pages a:hover {
background: #1d7bdf;
color: #fff;
transition-duration: 0.2s;
}
</style>
<body>
<div class="table-wrap" style="margin:0;">
<ul id="view_list" class="view_list clearfix"></ul>
<div id="page" class="pages"></div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var picData;
var pageSize=8;//每页显示8条数据;
$.ajax({//ajax一次性获取后台数据
url: 'xxxxxxxxxxxx',
data: {},
type : "GET",
async : false,
success: function (resp) {
if(resp.success){
var res=resp.rows;//获取结果数组
if(res.length!=0){
picData=resp;
//分页计算
var page_html="";//插入分页HTML
page_html+='<a id="first_page" class="disabled">首页</a> <a id="last_page" class="disabled"><< 上一页</a>';
var totalPage=Math.ceil(resp.total/pageSize);//共分多少页
for(var i=0;i<totalPage;i++){
if(i==0){
page_html+='<a class="current index_btn current_page" pagenum="'+(parseInt(i)+1)+'">'+(parseInt(i)+1)+'</a>';
}else{
page_html+='<a class="index_btn" pagenum="'+(parseInt(i)+1)+'">'+(parseInt(i)+1)+'</a>';
}
}
page_html+='<a id="next_page">下一页 >></a><a id="end_page">末页</a>';
page_html+='<label>共 </label> <span>'+totalPage+'</span> <label> 页 </label> <span>'+resp.total+'</span><label> 条 </label> <label> 跳转到 </label> <input type="text" id="page_to" value="1"><label> 页 </label> <a id="page_to_btn">GO</a>';
$("#page").html(page_html);
var resArr=[];//每页显示的数据放入数组
if(res.length<pageSize){//如果数据总数小于设置的每页数据数则数组里只放所有数据
for(var i=0;i<res.length;i++){
resArr.push(res[i]);
}
}else{//如果数据总数大于设置的每页数据数则数组里只放要求的8条数据
for(var i=0;i<pageSize;i++){
resArr.push(res[i]);
}
}
picViewList(resArr);//数据填充进页面的方法
//分页-首页点击
$("#first_page").click(function(){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(0).addClass("current_page");
$(".index_btn").eq(0).addClass("current");
picViewList(resArr);
})
//分页-上一页点击
$("#last_page").click(function(){
var current_index=$(".current_page").attr("pagenum");
if(current_index!=1){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(current_index-2).addClass("current_page");
$(".index_btn").eq(current_index-2).addClass("current");
var first_index=(current_index-2)*pageSize;
//var last_index=first_index+pageSize-1;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
}else{
$(this).attr("disabled",true);
}
})
//分页-下一页点击
$("#next_page").click(function(){
var current_index=$(".current_page").attr("pagenum");
if(current_index!=totalPage){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(current_index).addClass("current_page");
$(".index_btn").eq(current_index).addClass("current");
var first_index=current_index*pageSize;
//var last_index=first_index+pageSize-1;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
}else{
$(this).attr("disabled",true);
}
})
//分页-末页点击
$("#end_page").click(function(){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(totalPage-1).addClass("current_page");
$(".index_btn").eq(totalPage-1).addClass("current");
var first_index=(totalPage-1)*pageSize;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
})
//分页-跳转到某页点击
$(".index_btn").click(function(){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(this).addClass("current_page");
$(this).addClass("current");
var current_index=$(this).attr("pagenum");
var first_index=(current_index-1)*pageSize;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
})
//分页-Go按钮点击
$("#page_to_btn").click(function(){
var go_v=$("#page_to").val();
var r = /^[0-9]*[1-9][0-9]*$/;//正整数
if(r.test(go_v) && go_v<=totalPage && go_v>0){
$(".index_btn").removeClass("current_page");
$(".index_btn").removeClass("current");
$(".index_btn").eq(go_v-1).addClass("current_page");
$(".index_btn").eq(go_v-1).addClass("current");
var current_index=$(".index_btn").eq(go_v-1).attr("pagenum");
var first_index=(current_index-1)*pageSize;
var resArr=[];
for(var i=first_index;i<first_index+pageSize;i++){
resArr.push(res[i]);
}
picViewList(resArr);
}else{
alert('请输入正确跳转页数');
}
})
}else{
$("#page").html("");
}
}else{
alert("检索失败");
$("#page").html("");
}
}
});
function picViewList(data){//数据填充页面方法
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 基于PHP实现数据分页显示功能
- dx ASPxGridView的增,删,改,查,数据绑定,外观显示,功能设定,分页
- java 三层架构 实现数据的显示和分页功能
- 带有分页排序功能的表格插件的使用（通过ajax获取后台数据）
- SSH实现数据分页显示功能
- 一个项目中必不可少的功能——分页显示数据
- magento中对获取的数据在前台分页显示
- jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
- ASPxGridview总结(ASPxGridView的增,删,改,查,数据绑定,外观显示,功能设定,分页)
- 基于PHP实现数据分页显示功能
- php按条件查询的数据分页显示，点击下一页时又列出全部数据的解决办法
- bootstrap datatable显示数据表格及因分页获取数据造成的搜索问题
- javascript实现获取json数据分页功能
- 前台jsp获取后台查询的结果集数据并实现分页显示
- hibernate分页查询,在自己写的s2sh注册登录的基础上添加对数据表的分页显示功能
- 2017精华版：jquery 中 ajax功能，获取数据库数据，显示在html页面 01
- Bootstrap 分页插件 ajax获取数据显示
- ListView分页功能（3） 解决使用footerView数据不足，显示问题
- Java连接HBASE数据库，创建一个表，删除一张表，修改表，输出插入，修改，数据删除，数据获取，显示表信息，过滤查询，分页查询，地理hash