html ajax分页,简单ajax 分页

简单分页：

效果图：

思路：

数据渲染=》数据遍历(每页显示已规定好的条数).bindList()和执行分页渲染.initPaginator()

点击分页和下一页的时候，重新请求数据渲染，对应的数据重新遍历。

代码实现：

html:

分页测试

integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

* {margin: 0;padding: 0;}

.list li{display: block;}

.list li img{display: block;width:100px;}

js:

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 += '

';

content += ' ';

content += '

' + item.title + '

';

content += '

';

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 += '

' + i + '';

}

html = '

首页'

+ '

上一页'

+ html

+ '

下一页'

+ '

末页';

$('#' + 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);

});