炫了一笔的分页技术，动态十足，纯手工打造，无bug(用bootstrap的css样式，jQuery控制动态)。

最新推荐文章于 2022-05-24 12:24:21 发布

hehaoyang007

最新推荐文章于 2022-05-24 12:24:21 发布

阅读量1.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap JQuery JavaWeb 文章标签：分页 jquery bootstrap pagination

本文链接：https://blog.youkuaiyun.com/hehaoyang666/article/details/24189653

JQuery 同时被 3 个专栏收录

23 篇文章

订阅专栏

JavaWeb

14 篇文章

订阅专栏

Bootstrap

1 篇文章

订阅专栏

本文介绍了一种利用Bootstrap和jQuery实现的自定义分页插件。该插件通过CSS和JavaScript实现了平滑滚动和激活状态高亮的效果，并且包含了前进、后退等基本分页功能。

效果：

html,css:

毫无疑问首先导入bootstrap的.css,jQuery的js：

 <link href="../../static/css/bootstrap.min.css" rel="stylesheet" type="text/css">

<style>
	.pagination .pageindex .active a{ background:#666; color:#FFF;}
	.pagination{ margin:0 auto; width:600px; }
	.pageindex_start{float:left; width:auto; margin-right:0px;}
	.pageindex_end{ float:left; width:auto; margin-left:0px;}
	.pageindex_outter{ width:300px; float:left; overflow:hidden;}
	.pageindex{ width:1000%; position:relative; left:0px;}
	.pageindex li a{ width:15px; text-align:center; padding:0px;}
</style>

<div class="pagination">//pagination 是 bootstrap中的css样式
            	<div class="pageindex_start">
                    <ul>
                         <li><a href="#" id="firstPage">首页</a></li>
                          <li><a href="#" id="previous">上一页</a></li>
                    </ul>
                </div>
               <div class="pageindex_outter">
                   <ul class="pageindex">
                   	                                       
                      <li class="active"><a href="#" id="1">1</a></li>
                      <li><a href="#" id="2">2</a></li>
                      <li><a href="#" id="3">3</a></li>
                      <li><a href="#" id="4">4</a></li>
                      <li><a href="#" id="5">5</a></li>
                      <li><a href="#" id="6">6</a></li>
                      <li><a href="#" id="7">7</a></li>
                      <li><a href="#" id="8">8</a></li>
                      <li><a href="#" id="9">9</a></li>
                      <li><a href="#" id="10">10</a></li>
                      <li><a href="#" id="11">11</a></li>
                      <li><a href="#" id="12">12</a></li>
                      <li><a href="#" id="13">13</a></li>
                      <li><a href="#" id="14">14</a></li>
                      <li><a href="#" id="15">15</a></li>
                      <li><a href="#" id="16">16</a></li>  
                      <li><a href="#" id="17">17</a></li>
                      <li><a href="#" id="18">18</a></li>
                      <li><a href="#" id="19">19</a></li> 
                      <li><a href="#" id="20">20</a></li>                   
                  </ul>
              </div>
              <div class="pageindex_end">
                  <ul>
                        <li><a href="#" id="next">下一页</a></li>
                      <li><a href="#" id="lastPage">尾页</a></li>
                  </ul>
              </div>
 </div>

jQuery:
毫无疑问要使用jQuery必须导入：

<script src="../../static/js/jQuery.1.7.1.min.js"></script>

以下脚本的核心思想：

全局变量：

flag:ul可见区域的第一个li的脚码（可能不准但是差不多），以此来控制ul的left值，实现ul的滚动。

item_index = $(this).attr('id')-1;//过滤器：:eq(index)和:gt(index)和:lt(index)中的index是从0开始的
var item_num = parseInt(item_index)-(flag + 4);
var itemWidth = $('.pageindex').children('li').outerWidth();
var moveFactor = parseInt($('.pageindex').css('left'))-item_num * itemWidth;
$('.pageindex').animate({'left':moveFactor},'slow','linear');

item_index：就是a的id值，实现点击a时li添加class '.active'

函数isDisabled（）：实现判断是否可点击即是否到首页或尾页

全部jQuery代码：

 <script type="text/jscript">
  		$(document).ready(function(){
			var flag = 0;
			var item_index = 0;
			function isDisabled(){
				if(item_index==0){
					$('#previous').parent('li').addClass('disabled');
					$('#firstPage').parent('li').addClass('disabled');	
				}else{
					$('#previous').parent('li').removeClass('disabled');
					$('#firstPage').parent('li').removeClass('disabled'); 	
				}
				if(item_index==19){
					$('#next').parent('li').addClass('disabled');
					$('#lastPage').parent('li').addClass('disabled');	
				}else{ 
					$('#next').parent('li').removeClass('disabled');
					$('#lastPage').parent('li').removeClass('disabled');		
				}	
			}
			isDisabled();
			$('#next').bind('click',function(e){ 
				if(item_index==19){
					return false;
					}
				flag = flag+1; 
				item_index = item_index+1;
				$('.pageindex').children('li').removeClass('active');
				$('.pageindex li:eq('+item_index+')').addClass('active');
				
            	var itemWidth = $('.pageindex').children('li').outerWidth();
				var moveFactor = parseInt($('.pageindex').css('left'))-itemWidth;
				$('.pageindex').animate({'left':moveFactor},'slow','linear');
                isDisabled();             
       		});
			$('#previous').bind('click',function(){
				if(item_index==0){
					return false;
					}  
				flag = flag-1; 
				item_index = item_index-1;
				$('.pageindex').children('li').removeClass('active');
				$('.pageindex li:eq('+item_index+')').addClass('active');
            	var itemWidth = $('.pageindex').children('li').outerWidth();
				var moveFactor = parseInt($('.pageindex').css('left'))+itemWidth;
				$('.pageindex').animate({'left':moveFactor},'slow','linear');
                isDisabled();             
       		});
			$('.pageindex li a').bind('click',function(){
				item_index = $(this).attr('id')-1;//过滤器：:eq(index)和:gt(index)和:lt(index)中的index是从0开始的
				if(!$(this).parent('li').hasClass('active')){					 	
						$(this).parents('ul').children('li').removeClass('active');
						$('.pageindex li:eq('+item_index+')').addClass('active');
					}
				
				var item_num = parseInt(item_index)-(flag + 4);
				var itemWidth = $('.pageindex').children('li').outerWidth();
				var moveFactor = parseInt($('.pageindex').css('left'))-item_num * itemWidth;
				
				$('.pageindex').animate({'left':moveFactor},'slow','linear');
					
				isDisabled();
				flag = item_index-4;
			});
			$('#firstPage').click(function(){
					flag = 0;
					item_index = 0;
					$('.pageindex').animate({'left':'0px'},'slow','linear');
					$('.pageindex li').removeClass('active');
					$('.pageindex li:eq('+item_index+')').addClass('active');
					isDisabled();
			});
			$('#lastPage').click(function(){
					flag = 14; 
					item_index = 19;
					var item_num = '12';
					var itemWidth = $('.pageindex').children('li').outerWidth();
					var moveFactor = 0-item_num * itemWidth;
					$('.pageindex').animate({'left':moveFactor},'slow','linear');
					$('.pageindex li').removeClass('active');
					$('.pageindex li:eq('+19+')').addClass('active');
					isDisabled();
			});
		});
  </script>