原生javascript分页 html分页与ajax数据请求结合使用前端js分页

原生javascript分页功能，与后台结合使用ajax请求数据，是目前大多数前后端分离建站使用的分页展示数据的逻辑

使用示例：

效果图：

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>分页</title><!-- 分页css --><link rel="stylesheet" href="pages.css"><style type="text/css">html,body,div {padding: 0;margin: 0;}html {font-family: '微软雅黑', Arial, Verdana, arial, serif;}#content div {padding: 10px;background: #f2f2f2;margin-bottom: 1px;}</style></head><body><div id="content"></div><!-- 分页DOM --><div id="pagination" class="pagination"></div><!-- 引入分页js --><script src="pages.js"></script><!-- ajax函数,需要了解请点击这里:https://blog.csdn.net/u012780176/article/details/79278479 --><script src="ajax.js"></script><script>window.onload = function() {var url = 'https://cnodejs.org/api/v1/topics?limit=10&page=';var content = document.getElementById('content');var tmp = '';// 进入页面初始化请求第一页数据getData(1);// 使用ajax函数请求数据并渲染到页面function getData(page) {content.innerHTML = '正在加载...';ajax({url: url + page,type: "get",dataType: "json",success: function(data) {var list = data.data;list.forEach(function(context) {tmp += '<div>' + context.title + '</div>';});content.innerHTML = tmp;tmp = '';},error: function(err) {alert('请求数据失败');}})}// 示例化分页组件new myPagination({id: 'pagination',curPage: 1, //初始页码pageTotal: 50, //总页数pageAmount: 10, //每页多少条dataTotal: 500, //总共多少条数据pageSize: 5, //可选,分页个数showPageTotalFlag: true, //是否显示数据统计showSkipInputFlag: true, //是否支持跳转getPage: function(page) {// 点击分页按钮请求数据getData(page);}})}</script>
</body></html>

pages.js：

function myPagination(options) {var pageSize = options.pageSize,pageTotal = options.pageTotal,curPage = options.curPage,id = options.id,getPage = options.getPage,showPageTotalFlag = options.showPageTotalFlag,showSkipInputFlag = options.showSkipInputFlag,pageAmount = options.pageAmount,dataTotal = options.dataTotal;this.pageSize = pageSize || 5; //分页个数this.pageTotal = pageTotal; //总共多少页this.pageAmount = pageAmount; //每页多少条this.dataTotal = dataTotal; //总共多少数据this.curPage = curPage || 1; //初始页码this.ul = document.createElement('ul');this.id = id;this.getPage = getPage;this.middlePageSize = (this.pageSize - 1) / 2;this.showPageTotalFlag = showPageTotalFlag || false; //是否显示数据统计this.showSkipInputFlag = showSkipInputFlag || false; //是否支持跳转this.init();
};myPagination.prototype = {init: function init() {var pagination = document.getElementById(this.id);pagination.innerHTML = '';this.ul.innerHTML = '';pagination.appendChild(this.ul);var that = this;//首页that.firstPage();//上一页that.lastPage();//分页that.getPages().forEach(function (item) {var li = document.createElement('li');if (item == that.curPage) {li.className = 'active';} else {li.onclick = function () {that.curPage = parseInt(this.innerHTML);that.init();that.getPage(that.curPage);};}li.innerHTML = item;that.ul.appendChild(li);});//下一页that.nextPage();//尾页that.finalPage();//是否支持跳转if (that.showSkipInputFlag)that.showSkipInput();//是否显示总页数,每页个数,数据if (that.showPageTotalFlag)that.showPageTotal();},//首页firstPage: function firstPage() {var that = this;var li = document.createElement('li');li.innerHTML = '首页';this.ul.appendChild(li);if (parseInt(that.curPage) > 1) {li.onclick = function () {var val = parseInt(1);that.curPage = val;that.getPage(that.curPage);that.init();};} else {li.className = 'disabled';}},//上一页lastPage: function lastPage() {var that = this;var li = document.createElement('li');li.innerHTML = '<';if (parseInt(that.curPage) > 1) {li.onclick = function () {that.curPage = parseInt(that.curPage) - 1;that.init();that.getPage(that.curPage);};} else {li.className = 'disabled';}this.ul.appendChild(li);},//分页getPages: function getPages() {var pag = [];if (this.curPage <= this.pageTotal) {if (this.curPage < this.pageSize - this.middlePageSize) {//当前页数小于显示条数var i = Math.min(this.pageSize, this.pageTotal);while (i) {pag.unshift(i--);}} else {//当前页数大于显示条数var middle = this.curPage - Math.floor(this.pageSize / 2),//从哪里开始i = this.pageSize;if (middle > this.pageTotal - this.pageSize) {if (middle <= Math.ceil(this.pageSize / 2) - 1) {i = this.pageSize + this.pageTotal - this.pageSize;middle = 1;} else {middle = this.pageTotal - this.pageSize + 1;}}while (i--) {pag.push(middle++);}}} else {console.error('当前页数不能大于总页数');}if (!this.pageSize) {console.error('显示页数不能为空或者0');}return pag;},//下一页nextPage: function nextPage() {var that = this;var li = document.createElement('li');li.innerHTML = '>';if (parseInt(that.curPage) < parseInt(that.pageTotal)) {li.onclick = function () {that.curPage = parseInt(that.curPage) + 1;that.init();that.getPage(that.curPage);};} else {li.className = 'disabled';}this.ul.appendChild(li);},//尾页finalPage: function finalPage() {var that = this;var li = document.createElement('li');li.innerHTML = '尾页';this.ul.appendChild(li);if (parseInt(that.curPage) < parseInt(that.pageTotal)) {li.onclick = function () {var yyfinalPage = that.pageTotal;var val = parseInt(yyfinalPage);that.curPage = val;that.getPage(that.curPage);that.init();};} else {li.className = 'disabled';}},//是否支持跳转showSkipInput: function showSkipInput() {var that = this;var li = document.createElement('li');li.className = 'totalPage';var span1 = document.createElement('span');span1.innerHTML = '跳转到';li.appendChild(span1);var input = document.createElement('input');input.setAttribute("type", "number");input.onkeydown = function (e) {var oEvent = e || event;if (oEvent.keyCode == '13') {var val = parseInt(oEvent.target.value);if (typeof val === 'number' && val <= that.pageTotal) {that.curPage = val;that.getPage(that.curPage);} else {alert("跳转页数不能大于总页数 !")}that.init();}};li.appendChild(input);var span2 = document.createElement('span');span2.innerHTML = '页';li.appendChild(span2);this.ul.appendChild(li);},//是否显示总页数,每页个数,数据showPageTotal: function showPageTotal() {var that = this;var li = document.createElement('li');li.innerHTML = '共&nbsp' + that.pageTotal + '&nbsp页';li.className = 'totalPage';this.ul.appendChild(li);var li2 = document.createElement('li');li2.innerHTML = '每页&nbsp' + that.pageAmount + '&nbsp条';li2.className = 'totalPage';this.ul.appendChild(li2);var li3 = document.createElement('li');li3.innerHTML = '合计&nbsp' + that.dataTotal + '&nbsp条数据';li3.className = 'totalPage';this.ul.appendChild(li3);}
};

pages.css:

.pagination {padding:5px;font-family: '微软雅黑',Arial,Verdana,arial,serif;
}
.pagination ul {list-style: none;padding-left: 0;font-size: 0;
}
.pagination ul li {padding: 0 10px;vertical-align: bottom;display: inline-block;font-size: 14px;min-width: 36px;min-height: 28px;line-height: 28px;cursor: pointer;box-sizing: border-box;text-align: center;margin-left: -1px;color: #606266;border: 1px solid #ebebeb;height: 30px;transition: all .3s;
}
.pagination ul li:hover {color: #80bd01;
}
.pagination ul li.totalPage:hover {color: #606266;
}
.pagination  li.active {color: #80bd01;
}
.pagination li.disabled {cursor: not-allowed;
}
.pagination li.disabled:hover {color: #ccc;
}
.pagination li.totalPage {background: transparent;cursor: default;border: none;padding: 0 6px;
}.pagination li.totalPage:hover {transform: none;background-color: #ffffff;
}
.pagination li input {-webkit-appearance: none;background-color: #fff;background-image: none;border: 0;border-bottom: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;outline: none;padding: 3px 5px;transition: border-color .2s;width: 40px;height: 25px;margin: 0 6px;
}
.pagination li input:focus{border-color: #80bd01;
}
.pagination{user-select: none;
}
.pagination ul:nth-child(2){border-radius: 6px;
}
input[type=number] {-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;
}

原生javascript分页 html分页与ajax数据请求结合使用前端js分页相关推荐

记录分页懒加载功能,数据列表,每次触底实现分页懒加载
1. 引用uview加载更多标签页面中定义 <u-loadmore :status="status" /> data中定义 status:'nomore' 没有更多状 ...
axios重新调用失败的ajax_Vue之axios实现ajax数据请求
Vue通过axios实现数据请求 vue.js默认没有提供ajax功能的.所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. # 下载地址: https://un ...
ajax一次输出1万条数据库,后端接口一次给出100万条数据，请问你前端怎么分页处理...
面试官既然能这么问,我们从技术的角度出发,探索一下这道题,上手操作了一下: function loadAll(response) { var html = ""; for (var ...
一个前端js分页计算
<div id=rrapp><table id="rightHolder" class="layui-table" lay-skin=&quo ...
ajax 时间格式string,ajax 数据请求：json格式在浏览器变成了string ，使用JSON.stringify(params)方法...
var params = { md5str: "sf", datastr: "sf", } var ajaxRequest = $.ajax({ url: ur ...
前端框架这么火，还有必要学好原生 JavaScript 吗？
作为一名前端工程师,JavaScript 你一定每天都在用.但是,即便工作 5 年以上的前端也不一定用得非常熟,甚至很多前端对 JavaScript 的掌握程度仅仅停留在会用的层面. 而且 Vue/R ...
同步请求和ajax请求,ajax 同步请求和异步请求的差异分析
ajax 同步请求和异步请求的差异分析发布于 2016-12-27 08:14:26 | 53 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Javascript ...
MVC3.0 Razor实现Ajax数据分页
数据分页一只是一个老生常谈的问题,只要是做系统开发,一般都会牵扯到.最新学习了Razor,用到分页功能,分享下如何实现Ajax分页. 1.准备工作网上有现成的分页工具MVCPager,最新的是1.5 ...
SpingBoot中使用MyBatis和pagehelper实现数据的增删改查和分页
文章目录一.认识MyBatis CRUD注解映射注解高级注解二.用MyBatis实现数据的增加.删除.修改.查询和分页 1.创建springboot项目并引入依赖 2.实现数据表的自动初始化 ...
js上拉加载ajax数据,原生ajax写的上拉加载实例
上拉加载的思路 1 上拉加载是要把屏幕拉到最底部的时候触发ajax事件请求数据 2.所有要获取屏幕的高度文档的高度和滚动的高度下面的代码是已经做好了兼容的可以直接拿来用 Javascript: ...

原生javascript分页 html分页与ajax数据请求结合使用前端js分页

原生javascript分页 html分页与ajax数据请求结合使用前端js分页相关推荐

最新文章

热门文章

原生javascript分页 html分页与ajax数据请求结合使用 前端js分页

原生javascript分页 html分页与ajax数据请求结合使用 前端js分页相关推荐

最新文章

热门文章

原生javascript分页 html分页与ajax数据请求结合使用前端js分页

原生javascript分页 html分页与ajax数据请求结合使用前端js分页相关推荐