js 分页插件(jQuery)
2023-09-14 09:06:33 时间
参考:http://www.jb51.net/article/117191.htm 侵删
css 部分
@charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: center; margin-top: 20px; } .page .page_to{ display: inline-block; max-width: 250px; } .page .page_to li{ display: inline-block; width: auto; height: auto; border: 1px solid #ddd; padding:5px 10px; border-left-width: 0; color: #323232; cursor: pointer; } .page .page_to li.page_hide{ display: none; } .page .page_to li:hover{ color: #32C2CD; background-color: #f4f4f4; border-color: #DDDDDD; } .page .page_to li:first-child{ border-left-width: 1px; } .page .page_jump{ display: inline-block; width: 180px; } .page .page_jump input.page_jump_input{ width: 52px; height: 28px; text-align: center; text-decoration: none; background-color: #fff; border: 1px solid #ddd; margin:0 4px; } .page .page_jump input.page_jump_btn{ display: inline-block; padding: 2px 10px; margin-left: 5px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; /*vertical-align: middle;*/ -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; border-radius: 4px; background-color: #32c5d2; color: #FFFFFF; font-weight: bold; }
js 部分
(function($, window, undefined) { var curPage = '', //跳转是否有值 jumpVal = '', //从DOM中重新获取数据总数/总页数 lists = '', totals = '', //是否返回值 isTrue = false; var Page = function(opts) { this.settings = $.extend({}, Page.defaults, opts); curPage = this.settings.initPage; totals = this.settings.totalPages; jumpVal = this.settings.inputVal; this.init(); }; //默认配置 Page.defaults = { container: '.page', setPos: 'body', totalPages: null, totalLists: null, initPage: 1, inputVal: 1, callBack: null }; Page.prototype = { init: function() { this.create(); }, create: function() { var _template = '<div class="page">' + '<span class="page_details">' + '共<span class="page_num">' + this.settings.totalLists + '</span>条记录,' + '第<span class="page_current">' + curPage + '</span>/' + '<span class="page_size">' + this.settings.totalPages + '</span>页' + '</span>' + '<div class="page_to">' + '<ul class="flex_parent">' + '<li class="page_first flex_child">首页</li>' + '<li class="page_pre page_hide flex_child">« 上一页</li>' + '<li class="page_next flex_child">下一页 »</li>' + '<li class="page_last flex_child">末页</li>' + '</ul>' + '</div>' + '<div class="page_jump">' + '<span>第:<input type="number" class="page_jump_input" value="' + this.settings.inputVal + '">页</span>' + '<input type="button" class="page_jump_btn" value="Go">' + '</div>' + '</div>'; $(this.settings.setPos).append(_template); this.refreshDom(); this.bindEvent(); }, bindEvent: function() { var _this = this; //跳转首页 $(this.settings.container).on("click", ".page_first", function() { lists = $(_this.settings.container).find(".page_num").text(); totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) { curPage = 1; isTrue = _this.settings.callBack(1); if (isTrue) { _this.refreshDom(); $(_this.settings.container).find(".page_current").text(1); $(_this.settings.container).find(".page_jump_input").val(curPage); } } }); //跳转上一页 $(this.settings.container).on("click", ".page_pre", function() { lists = $(_this.settings.container).find(".page_num").text(); totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) { if (curPage > 1) { curPage = curPage - 1; isTrue = _this.settings.callBack(curPage); if (isTrue) { _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } } }); //跳转下一页 $(this.settings.container).on("click", ".page_next", function() { lists = $(_this.settings.container).find(".page_num").text(); totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) { if (curPage < totals) { curPage = curPage + 1; isTrue = _this.settings.callBack(curPage); if (isTrue) { _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } } }); //跳转末页 $(this.settings.container).on("click", ".page_last", function() { lists = $(_this.settings.container).find(".page_num").text(); totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) { curPage = totals; isTrue = _this.settings.callBack(curPage); if (isTrue) { _this.refreshDom(); $(_this.settings.container).find(".page_current").text(totals); $(_this.settings.container).find(".page_jump_input").val(curPage); } } }); //Go跳转 $(this.settings.container).on("click", ".page_jump_btn", function() { lists = $(_this.settings.container).find(".page_num").text(); totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) { jumpVal = Number($(_this.settings.container).find("input.page_jump_input").val()); // console.log('跳转的页数:' + jumpVal + ';跳转之前的页数:' + curPage); isTrue = _this.settings.callBack(jumpVal); if (jumpVal >= 1 && jumpVal <= totals) { curPage = jumpVal; // isTrue = _this.settings.callBack(curPage); if (isTrue) { _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } else { jumpVal = curPage; } } }); }, refreshDom: function() { $(this.settings.container).find("li.flex_child").removeClass("page_hide"); if (Number(totals) == 1) { $(this.settings.container).find(".page_pre").addClass("page_hide"); $(this.settings.container).find(".page_next").addClass("page_hide"); } else if (Number(totals) == 2) { if (Number(curPage) == 1) { $(this.settings.container).find(".page_pre").addClass("page_hide"); } else { $(this.settings.container).find(".page_next").addClass("page_hide"); } } else if (Number(curPage) == 1 && Number(totals) > 2) { $(this.settings.container).find(".page_pre").addClass("page_hide"); } else if (Number(curPage) == Number(totals) && Number(totals) > 2) { $(this.settings.container).find(".page_next").addClass("page_hide"); } } }; var pageInit = function(opts) { return new Page(opts); }; window.pageInit = $.pageInit = pageInit; })(jQuery, window, undefined);
调用
function page(){ $.pageInit({ container: '.page', //容器:默认page setPos: '.pageBox', //放置位置:默认body totalPages: totalPages, //总页数:必填(后台返回的,加载列表可以取到) totalLists: totalCount, //数据总数:必填(后台返回的,加载列表可以取到) initPage: pageNo, //初始页码:默认1(后台会返回,自己也可以定义) inputVal: 1, //设置跳转的input值:默认1 //要执行的函数:默认null,必须为fn且返回true则可执行分页,false则不执行 callBack: function(n) { var flag = true;
console.log(n); getCustomerList(n); //getCustomerList 是加载列表的方法;n 为返回的页码数, return flag; } }); };
相关文章
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
- js中定义配置文件
- 《Ext JS 4 First Look》翻译之二:全新的数据包
- JS魔法堂:彻底理解0.1 + 0.2 === 0.30000000000000004的背后
- jquery.nav.js定位导航滚动插件
- js的trim方法(转)
- HTML中css和js链接中的版本号
- jquery的height()和javascript的height总结,js获取屏幕高度
- [Vue-rx] Pass Template Data Through domStreams in Vue.js and RxJS
- jquery.cookie.js使用
- jquery ajax分页 js对象
- 【jQuery小实例】js 插件 查看图片
- js、jquery实用小技巧集合
- Json对象与Json字符串互转(4种转换方式) jquery 以及 js 的方式
- 用原生JS模仿jquery,需要HTML5的支持
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
- Atitit stomp.js conn连接activemq 目录 1.1. activemq 启动,已经默认开启了stomp ws的接口。。地址是1 1.2. Js 客户端代码1 1.3
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- GET jquery.js net::ERR_ABORTED 403 (Forbidden)
- js jquery判断是否含有某个class. className
- jquery,音乐播放,jquery对象转换成js对象
- 常用网络js链接大全(jQuery(3.4.1)、bootstrap、vue、ECharts、easyUI、React、maven、Mybatis、Spring、SpringMVC、Redis)
- 第57篇 QML 之 JS 数据类型详解(必看)
- js实现lodash的 keyBy 和 maxBy
- js-jquery-SweetAlert2【三】INPUT TYPES