js(jQuery)原生分页器

说明：

引入jQuery插件
引入page.js文件（在文章的最后面）

css:

/* 外面盒子样式---自己定义 */
.page_div {margin: 20px 10px 20px 0;color: #666
}/* 页数按钮样式 */
.page_div button {display: inline-block;min-width: 30px;height: 28px;cursor: pointer;color: #666;font-size: 13px;line-height: 28px;background-color: #f9f9f9;border: 1px solid #dce0e0;text-align: center;margin: 0 4px;-webkit-appearance: none;-moz-appearance: none;appearance: none;
}#firstPage, #lastPage, #nextPage, #prePage {width: 50px;color: #0073A9;border: 1px solid #0073A9
}#nextPage, #prePage {width: 70px
}.page_div .current {background-color: #0073A9;border-color: #0073A9;color: #FFF
}/* 页面数量 */
.totalPages {margin: 0 10px
}.totalPages span, .totalSize span {color: #0073A9;margin: 0 5px
}/*button禁用*/
.page_div button:disabled {opacity: .5;cursor: no-drop
}

HTML:

<div id="page" class="page_div"></div>

关键js代码：

$("#page").paging({pageNum: 5, // 当前页面totalNum: 14, // 总页码totalList: 300, // 记录总数量callback: function (num) { //回调函数console.log(num);}
});

page.js文件：

function Paging(element, options) {this.element = element;this.options = {pageNum: options.pageNum || 1,totalNum: options.totalNum,totalList: options.totalList,callback: options.callback};this.init();
}Paging.prototype = {constructor: Paging, init: function () {this.createHtml();this.bindEvent();}, createHtml: function () {var me = this;var content = [];var pageNum = me.options.pageNum;var totalNum = me.options.totalNum;var totalList = me.options.totalList;content.push("<button type='button' id='firstPage'>首页</button><button type='button' id='prePage'>上一页</button>");if (totalNum > 6) {if (pageNum < 5) {for (var i = 1; i < 6; i++) {if (pageNum !== i) {content.push("<button type='button'>" + i + "</button>");} else {content.push("<button type='button' class='current'>" + i + "</button>");}}content.push(". . .");content.push("<button type='button'>" + totalNum + "</button>");} else {if (pageNum < totalNum - 3) {for (var i = pageNum - 2; i < pageNum + 3; i++) {if (pageNum !== i) {content.push("<button type='button'>" + i + "</button>");} else {content.push("<button type='button' class='current'>" + i + "</button>");}}content.push(". . .");content.push("<button type='button'>" + totalNum + "</button>");} else {content.push("<button type='button'>" + 1 + "</button>");content.push(". . .");for (var i = totalNum - 4; i < totalNum + 1; i++) {if (pageNum !== i) {content.push("<button type='button'>" + i + "</button>");} else {content.push("<button type='button' class='current'>" + i + "</button>");}}}}} else {for (var i = 1; i < totalNum + 1; i++) {if (pageNum !== i) {content.push("<button type='button'>" + i + "</button>");} else {content.push("<button type='button' class='current'>" + i + "</button>");}}}content.push("<button type='button' id='lastPage'>尾页</button><button type='button' id='nextPage'>下一页</button>");content.push("<span class='totalNum'> 共 " + totalNum + " 页 </span>");content.push("<span class='totalList'> 共" + totalList + " 条记录 </span>");me.element.html(content.join(''));setTimeout(function () {me.dis();}, 20);}, bindEvent: function () {var me = this;me.element.off('click', 'button');me.element.on('click', 'button', function () {var id = $(this).attr('id');var num = parseInt($(this).html());var pageNum = me.options.pageNum;if (id === 'prePage') {if (pageNum !== 1) {me.options.pageNum -= 1;}} else if (id === 'nextPage') {if (pageNum !== me.options.totalNum) {me.options.pageNum += 1;}} else if (id === 'firstPage') {if (pageNum !== 1) {me.options.pageNum = 1;}} else if (id === 'lastPage') {if (pageNum !== me.options.totalNum) {me.options.pageNum = me.options.totalNum;}} else {me.options.pageNum = num;}me.createHtml();if (me.options.callback) {me.options.callback(me.options.pageNum);}});}, dis: function () {var me = this;var pageNum = me.options.pageNum;var totalNum = me.options.totalNum;if (pageNum === 1) {me.element.children('#firstPage, #prePage').prop('disabled', true);} else if (pageNum === totalNum) {me.element.children('#lastPage, #nextPage').prop('disabled', true);}}
};
$.fn.paging = function (options) {return new Paging($(this), options);
};

js(jQuery)原生分页器相关推荐

dw按钮图片滚动js_轮播图--swiper插件/原生js/jQuery
1.swiper插件: 需要下载该插件到本地,并用link标签引用其swiper-bundle.min.css文件,用script引用其swiper-bundle.min.js文件,下载地址及官方文档 ...
瀑布流布局(原生js,jQuery实现)
项目地址: 瀑布流布局实战阅读人群: 懂html,css,js,jquery的coder 阅读时间: 60minutes 1. 瀑布流式布局简介什么是瀑布流布局一种网站页面布局,视觉表现为参差不 ...
js/jquery中实现图片轮播
一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
js,jquery,css,html5特效
js,jquery,css,html5特效包含js,jquery,css,html5特效,源代码本文地址:http://www.cnblogs.com/Jeremy2001/p/6089343.h ...
html 获取下一个兄弟节点,js jquery获取当前元素的兄弟级上一个下一个元素
var chils= s.childNodes; //得到s的全部子节点 var par=s.parentNode; //得到s的父节点 var ns=s.nextSbiling; //获得 ...
(008)前端css,js,Jquery,Servlet入门
摘要:本周的学习内容是前端的css,js,Jquery,Servlet的入门; 文章目录 1 CSS 1.1 CSS入门以及使用方式 1.2 CSS的选择器(重点) 1.3 css的样式属性 1.3. ...
html 获取下一个兄弟节点,JS/JQuery获取当前元素的上一个/下一个兄弟级元素等元素的方法...
$(function(){ //遍历获取的input元素对象数组,绑定click事件 var len = $("input[type='file']").length; for(v ...
移动端（ios and android）长按识别二维码（含js与原生互调）
这篇文章就整理下移动端长按识别二维码的实现吧!实现方式可以分为三种一.长按原生控件,直接获取控件中的图片数据(src或background) 二.长按原生控件,截图识别三.长按web中的图片,ap ...
通过video.js或原生事件统计实际观看视频时长，支持多视频时长统计
前言:1.根据评论提问,优化了视频统计逻辑,增加了网络卡顿时暂停计时,重新播放后重新计时的功能.根据以下下载地址可以下载完整代码示例, 更新于:2022年8月26号,2.新增通过原生事件的写法统计观看 ...

js(jQuery)原生分页器

js(jQuery)原生分页器

js(jQuery)原生分页器相关推荐

最新文章

热门文章