单纯用JS做的分页插件
最近公司需要用到分页插件,由于市面上大多都是jQuery的分页插件,而且项目中有自己的工具类,所以说我在工具类中又添加了不依赖jQuery的分页插件,而且分页插件来说对DOM的操作也不是很多,就是用JS来操作DOM还有有一点点蛋疼的,起码代码看上去不是特别的简洁美观。
下面是插件的使用方法,这个是JS代码:
pageUtil.initPage('page',{
totalCount:500,//总页数,一般从回调函数中获取。如果没有数据则默认为1页
curPage:1,//初始化时的默认选中页,默认第一页。如果所填范围溢出或者非数字或者数字字符串,则默认第一页
showCount:9,//分页栏显示的数量
pageSizeList:[5,10,15,20,25,30],//自定义分页数,默认[5,10,15,20,50]
defaultPageSize:10,//默认选中的分页数,默认选中第一个。如果未匹配到数组或者默认数组中,则也为第一个
isJump:true,//是否包含跳转功能,默认false
isPageNum:true,//是否显示分页下拉选择,默认false
isPN:true,//是否显示上一页和下一面,默认true
isFL:true,//是否显示首页和末页,默认true
jump:function(curPage,pageSize){//跳转功能回调,传递回来2个参数,当前页和每页大小。如果没有设置分页下拉,则第二个参数永远为0。这里的this被指定为一个空对象,如果回调中需用到this请自行使用bind方法
console.log(curPage,pageSize);
},
});
下面是html代码,page就是对应的id,如果不需要调整居中什么的话,就直接使用最简单的div就行了:
<div style="width: 100%;text-align: center;">
<div id='page'></div>
</div>
下面就是效果图:
这里基于简单的概念,所以我把样式都设置成了内联,如果需要更改颜色或者其他的样式,可能需要在js中更改或者使用Important强制覆盖,但是一般只需改一个颜色就行了,也不是特别的麻烦。
具体代码怎么实现这里就不发了,有兴趣的同学可以下载代码看一下,这里是下载地址:http://pan.baidu.com/s/1mitDfnU,代码写的不好请勿喷····
单纯用JS做的分页插件的更多相关文章
- JS无刷新分页插件
本文介绍一个本人自己写的一JS分页插件 <script src="/Js/smart.page.min.js" type="text/javascript" ...
- echarts.js 做图表的插件
<scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- 分页插件--根据Bootstrap Paginator改写的js插件
刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...
- 原生 JS实现一个简单分页插件
最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...
- Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记
入职以后的第二个任务 根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...
- Jquery.Page.js 分页插件的使用
1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...
- 分页插件jquery.simplePagination.js使用
利用ecshop后台,利用插件更改分页显示样式遇到的问题,由于是利用Ajax获取数据进行页面数据更新?所以出现了以下情况: 初始化页面前 : 分页更新后: 点击后出现了分页插件内容消失, 原因:分页一 ...
- 原生js版分页插件
之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...
随机推荐
- JS事件大全及兼容
一般事件 事件 浏览器支持 描述 onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown ...
- java面试梳理
自己整理的有关java面试过的问题,有错的请矫正. 1, Spring的核心思想 控制反转和面向切面的编程 2,Spring的核心模块 反向控制与依赖注入.Bean配置以及加载 3,Scope是什么 ...
- webpack4.0.1安装问题及解决方法
2月底的时候,webpack4正式发布了,但是当我们安装之后,使用下面的语句来打包的时候,发现打包失败了 webpack ./src/main.js ./dist/bundle.js 并且给出了下面这 ...
- LightOJ 1239 - Convex Fence 凸包周长
LINK 题意:类似POJ的宫殿围墙那道,只不过这道题数据稍微强了一点,有共线的情况 思路:求凸包周长加一个圆周长 /** @Date : 2017-07-20 15:46:44 * @FileNam ...
- 浅谈Stein算法求最大公约数(GCD)的原理及简单应用
一.Stein算法过程及其简单证明 1.一般步骤: s1:当两数均为偶数时将其同时除以2至至少一数为奇数为止,记录除掉的所有公因数2的乘积k: s2:如果仍有一数为偶数,连续除以2直至该数为奇数为止: ...
- Metasploit 使用基础
本文将简单介绍一下Kali2 上Metasploit的一些基本使用,包括启动.更新及一个小问题"Module database cache not built yet, using slow ...
- 25、Python垃圾回收机制?
Python的GC模块主要运用了“引用计数”(reference counting)来跟踪和回收垃圾.在引用计数的基础上,还可以通过“标记-清除”(mark and sweep)解决容器对象可能产生的 ...
- 2018 黑盾杯部分writeup
这次比赛拿了三十多名.呵呵.或许这就是菜吧. 比赛经验教训: 1.赛前一定要调整好情绪. 2.比赛尽量不要紧张,每一题都认认真真的看过去! 3.站在出题者的角度去思考问题 4.刷题 5.还是情绪吧.其 ...
- Linux线程编程之生产者消费者问题【转】
转自:http://www.cnblogs.com/clover-toeic/p/4029269.html 前言 本文基于顺序循环队列,给出Linux生产者/消费者问题的多线程示例,并讨论编程时需要注 ...
- React 16 源码瞎几把解读 【前戏】 为啥组件外面非得包个标签?
〇.看前准备 1.自行clone react最新代码 2.自行搭建一个能跑react的test项目 一.看表面:那些插件 如何解析JSX 有如下一段代码: // ---- hearder.jsx 组件 ...