1.自定义 bootstrap 分页功能,一个简单的js实现,自己写的,分享一下,喜欢的请点赞哈!
2.下面附上 demo 下载,有问题给我留言
demo中有点小问题,请复制以下代码测试一下
/* * ........ demo ......... $('.page').pagelist({ size:10, count:1000, items:15, currpage:1, click:null} ); * */ jQuery.fn.extend({ pagelist:function(ps,param){ var $this = this; this.ps = ps; this.element = $(this); if($this.element.length==0){ console.debug('element is not found ....'); return; } var data = this.data('params'); if(data==undefined||data==null){ var pageparams = { size:0, count:0, items:5, currpage:1, pagecount:0, click:null }; $this.pageparams = $this.data('params',pageparams); } this.pageparams = this.data('params'); if(typeof ps == 'string'){ $this.ps = param; } if($this.ps!=null&&$this.ps!==undefined){ $.each($this.ps,function(k,v){ if(v!=''&&v!=null){ $this.pageparams[k] = v; } }); } $.each($this.pageparams,function(k,v){ if(k=='click'&&v!=null&&v!=undefined&&typeof v !='function'){ console.debug('click require a funciton ....'); }else if(k!='click'&&isNaN(v)&&v!=''){ console.debug( k + ' error...............') }else if(typeof v == 'string'){ $this.pageparams[k] = parseInt(v); } }); this.bind = function(){ $this.find('.first').click(function(e){ e.preventDefault(); $(this).removeClass('active'); pageparams.currpage = 1; $this.change(pageparams); }); $this.find('.last').click(function(e){ e.preventDefault(); $(this).removeClass('active'); pageparams.currpage = pageparams.pagecount; $this.change(pageparams); }); $this.find('.next').click(function(e){ e.preventDefault(); if(pageparams.currpage>=pageparams.pagecount){ return; } pageparams.currpage = pageparams.currpage+1; $this.change(pageparams); }); $this.find('.prev').click(function(e){ e.preventDefault(); if(pageparams.currpage<=1){ return; } pageparams.currpage = pageparams.currpage-1; $this.change(pageparams); }); return $this; }; this.apppend = function (begin,end,pageparams){ $this.element.find('.active').removeClass('active'); for(var i = begin;i<=end;i++){ var pageli = $('<li>'); pageli.append('<a href="javascript:void(0)">'+i+'</a>'); $this.element.find('.next').before(pageli); if(i==pageparams.currpage){ pageli.addClass('active'); continue; } pageli.on('click',function(e){ e.preventDefault(); var val = $(this).find('a').text(); if(isNaN(val)==false&&val!=''){ val = parseInt(val); } if(pageparams.click!=null){ pageparams.click($(this),val); } pageparams.currpage = val; $this.change(pageparams); }); } return $this; } this.change = function (){ var pageparams = $this.data('params'); $this.find('.active').removeClass('active'); var pageCount = parseInt((pageparams.count + pageparams.size - 1) / pageparams.size); pageparams.pagecount = pageCount; $this.find('.next,.prev,.first,.last').removeClass('disabled').show(); if(pageparams.currpage==1||isNaN(pageCount)||pageCount==0){ $this.find('.first,.prev').addClass('disabled'); } if(pageparams.currpage==pageparams.pagecount||isNaN(pageCount)||pageCount==0){ $this.find('.last,.next').addClass('disabled'); } $this.find('li:not(".next,.prev,.first,.last")').remove(); if(pageparams.pagecount<=0||isNaN(pageCount)){ return; } pageparams.currpage = parseInt(pageparams.currpage); if(pageparams.currpage<=0){ pageparams.currpage=1; } var temp = parseInt(pageparams.currpage-pageparams.items/2) var count = pageCount-pageparams.currpage; // var begin = p.currpage-(p.items%2==0?p.items/2:p.items/2+1); // var end = p.currpage+(p.items%2==0?p.items/2:p.items/2+1); var begin = parseInt(pageparams.currpage-(pageparams.items/2)); var end = parseInt(pageparams.currpage+(pageparams.items/2)); if(begin<=0){ end = end-begin+1; begin = 1; } if(end>=pageparams.pagecount){ begin -= end - pageparams.pagecount; end = pageparams.pagecount; } if(end<pageparams.pagecount){ end = end - 1; } $this.apppend(begin, end, pageparams) return $this; } if(typeof ps == 'string'){ eval(('$this.'+ps+'()')); }else{ if($this.element.find('.pagination').length==0){ var pagestr = '<nav><ul class="pagination"><li class="first"><a href="javascript:void(0)">首页</a></li><li class="prev"><a href="javascript:void(0)" fui-arrow-left">上一页</a></li><li class="next"><a href="javascript:void(0)" class="fui-arrow-right">下一页</a></li><li class="last"><a href="javascript:void(0)">尾页</a></li></ul></nav>'; $this.append(pagestr); $this.find('.next,.prev,.first,.last').unbind('click'); $this.bind(); } $this.change(); } return $this; } });
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>page list</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/page.js"></script> </head> <body> <div class="page"></div> <div class="page1"></div> </body> <script type="text/javascript"> $(function(){ $('.page1').pagelist( { size:10, count:1000, items:10, currpage:1, click:function(page,pageNo){ console.debug('pageNo = ' + pageNo); } } ) $('.page').pagelist({ size:10, count:1000, items:15, currpage:1, click:null} ); setTimeout(function(){ $('.page').pagelist({items:8}); },2000) }) </script> </html>
相关推荐
这是两款漂亮的bootstrap分页样式。他们在元素bootstrap3分页样式的基础上,通过简单的CSS3代码来对它进行美化,生成漂亮的分页样式。
bootstrap分页插件,亲自测过,很实用哟
jQuery基于Bootstrap分页插件是一款分页插件设置固定列表分页显示,支持动态分页数据代码。 jQuery(document).ready(function($){ for (var i = 1; i ; i ) { $('.list-group').append('...
当从数据库查出数据过多时,分页条页码太多,将多余部分进行隐藏,永远只显示固定数量的页码
这是两款bootstrap分页样式美化特效。该bootstrap分页样式美化特效在元素bootstrap分页样式的基础上,通过简单的CSS代码,将对它们进行效果美化。
Bootstrap分页类Bootstrap分页类Bootstrap分页类Bootstrap分页类Bootstrap分页类Bootstrap分页类
基于bootstrap效果的分页实现。css样式和html页面样例。
前端html分页逻辑是手写的,用的是Thymeleaf模板引擎,后端用的是mybatis plus的内置分页功能
这是个根据bootstrap翻页css样式开发的插件,是写公司业务时自己弄的,样式几乎用的bootstrap原版,配置还算灵活,源代码量少,更改方便,使用时请阅读readme
* 自定义标签实现分页 * * @param request * @param response * @param @ResponseBody ajax响应 * @param method={RequestMethod.POST,RequestMethod.GET}表单请求 * @param consumes="application/...
四种jQuery+bootstrap分页效果插件.rar
bootstrap分页控件pagination在asp.net mvc的使用,采用了bt的日历控件、分页控件、AJAX获取后台分页数据
使用Bootstrap实现分页,并且当页码过多时使用省略号,这篇文章有样式的简单演示:https://blog.csdn.net/u013025627/article/details/50485327 样式只是自己的简单样式,不同的项目有不同的样式风格,只是提供分页...
bootstrap分页组件,bootstrap-paginator,可以轻松实现bootstrap风格的分页效果,欢迎下载
bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件,在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置,可以实现查询、分页、排序、复选框、设置显示列、...
本文将详细介绍Bootstrap分页 概述 在Bootstrap框架中提供了两种分页导航: :ballot_box_with_check: 带页码的分页导航 :ballot_box_with_check: 带翻页的分页导航 页码分页 带页码的分页导航,可能是最常见的一种...
基于bootstrap的分页功能,可以点击,同时也是基于seajs的分页插件