简单ajax 分页
简单分页：
效果图：
思路：
数据渲染=》数据遍历（每页显示已规定好的条数）.bindList（）和执行分页渲染.initPaginator（）
点击分页和下一页的时候，重新请求数据渲染，对应的数据重新遍历。
代码实现：
html:
<!doctype html>
<html style='' lang="en">
<head>
<title>分页测试</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
<style>
* {margin: 0;padding: 0;}
.list li{display: block;}
.list li img{display: block;width:100px;}
</style>
</head>
<body>
<div class="list">
<ul id="listContent">
<li></li>
</ul>
</div>
<div id="pagination" style="display: none">
<ul class="pagination"></ul>
</div>
</body>
</html>js:
<script type="text/javascript">
var List = {
contentId: "listContent", //渲染列表id
pageId: "pagination", //渲染分页id
pageIndex: 1, //第几页开始渲染
pageSize: 6,//每页渲染多少条数据
pageSum:0,//共多少条数据
refreshId: null
};
//data.count为总的数据条数，即共多少条数据
List.loadList = function (pageIndex) {
var ajaxRequest = function () {
$.ajax({
url: "http://123.56.196.192:2000/syxa/news-consult/2/0/1000000",
type: "GET",
// data: data,
error: function () {
// console.log(error);
},
success: function (data) {
console.log(data);
console.log(data.data.length);
if (data.count == 0) {
console.log('当前没有数据记录');
}
else {
if(pageIndex == 1){
List.initPaginator(data.count, data.data);
$('#' + List.pageId).show();
$('.pagination li[data-page="1"]').addClass('active');
$('.pagination li.page-first').removeClass('active').addClass('disabled');
}
List.bindList(pageIndex,data.count,data.data);
}
}
});
}
ajaxRequest();
};
//数据遍历
List.bindList = function (pageIndex,count,data) {
var start = (pageIndex - 1) * List.pageSize; // 数据开始点
var content = '';
for (var index = start; index < pageIndex*List.pageSize && index < data.length; index++) { //遍历第几页内容，pageIndex也页面顺序
console.log(data[index]);
content += List.getListItem(data[index]);
}
$('#' + List.contentId).html('');
$('#' + List.contentId).append(content);
};
List.getListItem = function (item) {
var content = '';
content += ' <li>';
content += ' <a href="javascript:;"><img src="' + item.top_img + '" alt="' + item.title + '" /></a>';
content += ' <h4>' + item.title + '</h4>';
content += ' </li>';
return content;
};
//分页
List.initPaginator = function (count, data) {
var pageSize = List.pageSize;
var pageTotal = Math.ceil(count / pageSize);
var pageIndex = List.pageIndex;
List.pageSum = pageTotal;
console.log(pageTotal);
var html = "";
for (var i = pageIndex; i <= pageTotal; i++) {
html += '<li class="page" data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
}
html = '<li data-page="1" class="page-first"><a href="javascript:;">首页</a></li>'
+ '<li data-page="" class="page-prev disabled"><a href="javascript:;" >上一页</a></li>'
+ html
+ '<li data-page="2" class="page-next"><a href="javascript:;">下一页</a></li>'
+ '<li data-page="' + pageTotal + '" class="page-last"><a href="javascript:;">末页</a></li>';
$('#' + List.pageId).find('ul').html(html);
};
//点击页码刷新跳数据
$('#' + List.pageId).on('click','li',function (e) {
var pageIndex=parseInt($(this).attr('data-page'));
var activeIndex=parseInt($('.pagination li.active').attr('data-page'));//当前active状态页码
$('.pagination li').removeClass('active');
if($(this).hasClass('page-prev')) {
List.loadList(activeIndex-1);
var cur=activeIndex-1;
$('.page-next,.page-last').removeClass('disabled');
$('.pagination li.page[data-page=' + cur + ']').addClass('active');
if(cur == 1){
$('.page-prev,.page-first').addClass('disabled');
$('.page-prev').attr('data-page','');
}else{
$('.page-prev').attr('data-page',activeIndex-2);
$('.page-next').attr('data-page',activeIndex);
}
}else if($(this).hasClass('page-next')){
List.loadList(activeIndex+1);
var cur=activeIndex+1;
$('.page-prev,.page-first').removeClass('disabled');
$('.pagination li.page[data-page=' + cur + ']').addClass('active');
if(cur == List.pageSum){
$('.page-next,.page-last').addClass('disabled');
$('.page-next').attr('data-page','');
}else{
$('.page-prev').attr('data-page',activeIndex);
$('.page-next').attr('data-page',activeIndex+2);
}
}else if((!$(this).hasClass('page-prev')) &&(!$(this).hasClass('page-next'))){
$(this).addClass('active');
List.loadList($(this).attr('data-page'));
}
if(!($(this).hasClass('page-first')) && !($(this).hasClass('page-prev'))&& !($(this).hasClass('page-last')) && !($(this).hasClass('page-next'))){
if(pageIndex == 1){
$('.page-prev,.page-first').addClass('disabled');
$('.page-next,.page-last').removeClass('disabled');
$('.page-next').attr('data-page','2');
}else if(pageIndex == List.pageSum){
$('.page-prev,.page-first').removeClass('disabled');
$('.page-next,.page-last').addClass('disabled');
$('.page-prev').attr('data-page',List.pageSum-1);
$('.page-next').attr('data-page','');
}else{
$('.page-prev,.page-first').removeClass('disabled');
$('.page-next,.page-last').removeClass('disabled');
$('.page-prev').attr('data-page',pageIndex-1);
$('.page-next').attr('data-page',pageIndex+1);
}
}
});
//页面初始化
$(function () {
List.loadList(List.pageIndex);
});
</script> 相关推荐
K先生 2020-11-10
wushengyong 2020-10-28
西瓜皮儿的皮儿 2020-09-07
molong0 2020-08-03
jokewinl 2020-07-18
田有朋 2020-07-05
80530895 2020-07-05
javamagicsun 2020-06-21
liangwenrong 2020-06-17
molong0 2020-06-16
xiuyangsong 2020-06-03
jaylong 2020-06-02
EdShao 2020-05-29
晨曦之星 2020-05-29
dreamhua 2020-05-10
smalllove 2020-05-09
liqiancao 2020-05-08
Dullonjiang 2020-05-06
GechangLiu 2020-05-04