最近公司需要用到分页插件,由于市面上大多都是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. ZooKeeper在线迁移

    在至少有一个Leader存在的前提下,进行Zookeeper的在线增量.在线减量.在线迁移 在全过程中ZooKeeper不停止服务 注意事项 首先,当我们要从3台扩充到5台时,应保证集群不停止服务. ...

  2. 转:数据标准化/归一化normalization

    转自:数据标准化/归一化normalization 这里主要讲连续型特征归一化的常用方法.离散参考[数据预处理:独热编码(One-Hot Encoding)]. 基础知识参考: [均值.方差与协方差矩 ...

  3. GridControl详解(五)设置行备注和行号

    备注显示设置 设置备注字段 显示结果: 可以写入按键事件F3,用以开关备注显示 private void Form4_KeyUp(object sender, KeyEventArgs e) { if ...

  4. Linux 操作系统下 VI 编辑器常用命令详细介绍

    一.Vi 简介 vi是unix世界中最通用的全屏编辑器,linux中是用的是vi的加强版vim,vim同vi完全兼容,vi就是"visual interface"的缩写.它可以执行 ...

  5. 【BZOJ】2631: tree LCT

    [题意]给定n个点的树,每个点初始权值为1,m次操作:1.x到y的点加值,2.断一条边并连一条边,保证仍是树,3.x到y的点乘值,4.x到y的点权值和取模.n,m<=10^5. [算法]Link ...

  6. cms替换主页

    cms替换主页的步骤 1.先做好静态页面: 2.在D:\wamp\www\phpcms\install_package\phpcms\templates文件夹下建新的文件夹tianqiwangluo( ...

  7. Django之利用ajax实现图片预览

    利用ajax实现图片预览的步骤为: 程序实现的方法为: 方法一: upload.html <!DOCTYPE html> <html lang="en"> ...

  8. Http Header信息&状态码

    Header信息   (Status-Line):状态项,包括协议类型,http返回码和状态:  Cache-control:是否可以被缓存(public可以:private和no-cache不可以: ...

  9. OGG生成数据定义文件的参数NOEXTATTR

    ./defgen paramfile ./dirprm/jzjj.prm NOEXTATTR In OGG 11.2, there is a new parameter NOEXTATTR. This ...

  10. Linux实用命令之git-svn

    近日发现了有一个工具,git-svn,可以打通git svn之间的鸿沟. 很适合习惯于git,却需要维护svn代码的同学. 安装 sudo apt-get install git-svn 具体使用就不 ...