最近公司需要用到分页插件,由于市面上大多都是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做的分页插件的更多相关文章

  1. JS无刷新分页插件

    本文介绍一个本人自己写的一JS分页插件 <script src="/Js/smart.page.min.js" type="text/javascript" ...

  2. echarts.js 做图表的插件

    <scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...

  3. MVC如何使用开源分页插件shenniu.pager.js

    最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...

  4. 分页插件--根据Bootstrap Paginator改写的js插件

    刚刚出来实习,之前实习的公司有一个分页插件,和后端的数据字典约定好了的,基本上是看不到内部是怎么实现的,新公司是做WPF的,好像对于ASP.NET的东西不多,导师扔了一个小系统给我和另一个同事,指了两 ...

  5. 原生 JS实现一个简单分页插件

    最近做的一个 PC端的需求,这个需求中有一个小点,页面底部有一块列表区域,这个列表的数据量比较大,需要进行分页控制,切换页码的时候,发送一个 ajax请求,在页面无刷新的情况下,实现列表数据的刷新,所 ...

  6. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  7. Jquery.Page.js 分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...

  8. 分页插件jquery.simplePagination.js使用

    利用ecshop后台,利用插件更改分页显示样式遇到的问题,由于是利用Ajax获取数据进行页面数据更新?所以出现了以下情况: 初始化页面前 : 分页更新后: 点击后出现了分页插件内容消失, 原因:分页一 ...

  9. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

随机推荐

  1. js-之闭包的理解

    说说你对闭包的理解? 答:闭包是能够读取其它函数内部变量的函数.本质上闭包是将函数内部和函数外部连接起来的一座桥梁.由于js的链式作用域,因为函数也是对象,函数内部访问函数外部的变量就类似于子对象一级 ...

  2. vim如何粘贴

    刚开始vim的学习之旅,在进行粘贴操作时遇到了麻烦. 教程上粘贴的命令是p,但我发现该命令只适用于从vim到vim的复制(p未必就仅仅局限于此,但我目前所了解到的情况如此),当我从网上复制了一段代码想 ...

  3. linux命令df中df -h和df -i的区别

    df 命令: linux中df命令的功能是用来检查linux服务器的文件系统的磁盘空间占用情况.可以利用该命令来获取硬盘被占用了多少空间,目前还剩下多少空间等信息. 1.命令格式: df [选项] [ ...

  4. 关于aspx.designer.cs的研究

    .aspx文件..aspx.cs文件和.aspx.designer.cs的一些说明 .aspx文件:(页面)书写页面代码.存储的是页面design代码.只是放各个控件的代码,处理代码一般放在.cs文件 ...

  5. 【译】DTD - Entities

    原文:DTD - Entities 实体用于定义XML文档中特殊字符的快捷方式. 实体主要有四种类型: 内置实体(Built-in entities) 字符实体(Character entities) ...

  6. 深入理解Spring系列之三:BeanFactory解析

    转载 https://mp.weixin.qq.com/s?__biz=MzI0NjUxNTY5Nw==&mid=2247483824&idx=1&sn=9b7c2603093 ...

  7. mysql开启GTID跳过错误的方法【转】

    1.数据库版本 MySQL> select version()    -> ;+-------------------------------------------+| version( ...

  8. SQLserver连接本地服务器

    1.打开SQLserver “连接到服务器” 2.服务器类型:数据库引擎 3.服务器名称:浏览更多->本地服务器->数据库引擎->选择本地服务器 4.身份验证:windows验证 5 ...

  9. 批量删除.svn文件夹和.svn文件

    新建可运行文件 Windows环境 将下面的代码保存为 kill-svn.bat文件,放到要删除.svn文件的目录下,双击运行即可 @echo on @rem 删除SVN版本控制目录 @rem for ...

  10. docker简单介绍(资料收集总结)

    [前言] 首先,感谢我的leader总是会问我很多技术的基本资料,让我这个本来对于各种技术只知道操作命令不关注理论知识的人,开始重视理论资料. 关于docker的操作步骤等等,都是之前学习的,现在补上 ...