基于jquery的简单分页实现

先上图：

之前在做表格插件想把分页整合进去，原本去网站找一个现成的整合进去，发现有些太简单或者很复杂，达不到自己的要求，自己想还是自己整一个，顺便了解一下其中的原理。
分页样式是基于boostarp的。
（1）页面引入boostarp.css和jquery
（2）html代码

<div id="pageBox" style="width:1000px;margin: 30px auto;">
</div>

（2）js代码

var total = 500,//数据总条数pageNumber = 1,//当前页pageSize = 10, //每页显示的条数edges = 2,//两侧显示的页码数 大于1playes = 5,//主页码区显示的页码数 大于3pages = Math.ceil(total / pageSize);//总页数
renderPageItem();
function renderPageItem() {$ul = $('<ul class="pagination"></ul>');var start = 1;var end = pages;if (playes % 2) {//playes是奇数start = pageNumber - Math.floor(playes / 2);end = pageNumber + Math.floor(playes / 2);} else {//playes是偶数start = pageNumber - (playes / 2 - 1);end = pageNumber + playes / 2;}if (start <= edges + 1) {start = 1;if (end < playes && playes<pages) {end = playes;}} else {for (var i = 1; i <= edges; i++) {$ul.append(renderItem(i));}$ul.append('<li><span>...</span></li>')}if (end < pages - edges) {for (var i = start; i <= end; i++) {$ul.append(renderItem(i));}$ul.append('<li><span>...</span></li>');for (var i = pages - edges + 1; i <= pages; i++) {$ul.append(renderItem(i));}} else {end = pages;if(start>pages-playes+1){start = pages-playes+1}for (var i = start; i <= end; i++) {$ul.append(renderItem(i));}}$ul.prepend(renderPrevItem());$ul.append(renderNextItem());$('#pageBox').empty().append($ul);
}function renderItem(i) {$item = $('<li><a href="#">' + i + '</a></li>');if (i == pageNumber) {$item.addClass('active');}$item.on('click', (function (num) {return function () {pageNumber = num;renderPageItem();}})(i));return $item
}function renderPrevItem() {$prev = $('<li><a href="#">&laquo;</a></li>');if (pageNumber == 1) {$prev.addClass('disabled');} else {$prev.on('click', function () {pageNumber = pageNumber - 1;renderPageItem();})}return $prev;
}function renderNextItem() {$next = $('<li><a href="#">&raquo;</a></li>');if (pageNumber == pages) {$next.addClass('disabled');} else {$next.on('click', function () {pageNumber = pageNumber + 1;renderPageItem();})}return $next;
}

其实可以整合成一个插件来的，最近忙也没时间整合了，原本是打算整合到表格插件里面去的，发现这样表格插件需要和ajax整在一起，决定还是先不放进去了。这个的具体代码可以看这里点我看源码和效果

基于jquery的简单分页实现相关推荐

基于jquery的php分页,基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
jquery前端简单分页_如何使用jQuery创建简单的分页
jquery前端简单分页 How to create easy pagination with jQuery jQuery pagination. All we know, that when we ...
源码来袭！！！基于jquery的ajax分页插件（demo+源码）
前几天打开自己的博客园主页,发现自己的园龄竟然有4年之久了,没记错的话刚接触编程就知道了博客园,也就是说我入坑4年了?时光啊~.刚学习编程的时候最喜欢的就是来园子里听大神们吹牛逼,看着他们装逼就觉得很 ...
jQuery实现简单分页
现在项目分页好多都是直接用插件,今天发现其实自己写页不难.主要是以前老师讲的时候没听.(对不起老何!哈哈) 今天发布一个前端超简单的分页效果,纯jQ!废话不多说,上代码.要是你们需要,直接复制过去就可 ...
基于jquery实现的分页组件
分页组件现在在网页中的应用已经变得十分普遍,像我平时经常会去的淘宝和爱奇艺都有用到. 分页的主要用处呢,就是可以分页面去请求数据,不然你像淘宝每个分类有成千上万个商品和店铺,全部请求过来再展示给你的话 ...
jQuery实现简单分页(jqPaginator插件)
文章目录前言一.jqPaginator是什么? 二.使用步骤 1.引入库 2.读入数据 3.参数文档三.完整项目实现案列 1.先上效果 2.搭建Servlet运行环境 3.建一个项目 4.后端代 ...
JQuery实现简单分页（DataTable,pagination）
DataTable分页(前端分页,后台不需要任何处理) $('#tblResult').DataTable({// columnDefs:[{ orderable:false, targets:[0] ...
基于 jQuery 与 Bootstrap 简单封装一个表格分页的组件
最近遇到一个需求:页面上的数据可能会有很多条,需要将数据分页展示在表格中.项目用的是 jQuery 和 Bootstrap,本来想直接用 bootstrapTable 插件,但是需要额外引入 js 文 ...
基于Jquery+Ajax+Json+高效分页
摘要分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...

基于jquery的简单分页实现

基于jquery的简单分页实现相关推荐

最新文章

热门文章