Jq手搓一个简易版分页器

分页器的效果如下：

1、分页器dom结构(前面要有你将渲染列表的dom结构，这里省略)

<div class="news-trends-fy">
	<div class="left" id="left">
		<img src="../../imags/nof-icon-left.png" /> //左箭头
	</div>
	<div class="new-trends-fy-content">
		<ul class="new-trends-fy-content-ul" id="fy-content-ul">
		//此处是页码
			
		</ul>
	</div>
	<div class="right" id="right">
		<img src="../../imags/nof-icon-right.png" /> //右箭头
	</div>
	<div class="hh">
		<p>共 <span id="first">0</span> 页</p>
		<p><span id="second">0</span> 条</p>
	</div>
</div>

2、js：主要是从接口获取页码总数，绘制分页器的页码，定义点击事件
①定义要用到的变量，并绘制页码

var current = 1
var num // 这是页码
var activeindex = 0 //用于标识当前被激活的页码索引
 getList(current)
for(var j = 1;j < num+1;j++){
	var fyNum = '<li type = '+j+'>'+j+'</li>' 
	$('#fy-content-ul').append(fyNum)
}

②使用ajax发请求，获取列表数据

function getList(current){
	 $.ajax({
		async:false,
		type: "get",
		url: "此处是接口",
		dataType: 'json',
		data: {
			current: current,
			size: 12,
		},
		success: function(res) {
			$('#插入的容器清空').empty();
			if(res.data != ''){
				var item;
				var content;
				num = Math.ceil(res.data.total/12)
				$('#first').text(num)
				$('#second').text(res.data.total)
				
				for(var i = 0 ;i < res.data.records.length;i++){
					item = res.data.records[i].content
					content = escapeHtml(item)
					var list ='<div class="news-trends-content-other-item">此处是分页的列表内容，自己根据需求写</div>';
				$('#插入某容器').append(list);
				}
			}
		},
	})
}

③接下来是点击事件，主要是上一页、下一页 和页码跳转

$("li:first-child").addClass('active') //给第一个按钮加激活样式
$('#fy-content-ul>li').on('click',function(){ //这是页码的点击事件
	$(this).addClass('active').siblings('li').removeClass('active');
	current = $(this).text()
	activeindex = current-1 
	getList(current)
})
$('#left').on('click',function(){	//上一页
	current--
	activeindex--
	if(current === 0){
		current=1
		activeindex=0
		$('#fy-content-ul>li').eq(activeindex).addClass('active').siblings('li').removeClass('active');
		getList(current)
	}else{
		$('#fy-content-ul>li').eq(activeindex).addClass('active').siblings('li').removeClass('active');
		getList(current)
	}	
})
$('#right').on('click',function(){ //下一页
	current++
	activeindex++
	if(current <= num){
		$('#fy-content-ul>li').eq(activeindex).addClass('active').siblings('li').removeClass('active');
		getList(current)
	}else{
		current=num
		activeindex=num--
		$('#fy-content-ul>li').eq(activeindex).addClass('active').siblings('li').removeClass('active');
		getList(current)
	}
	
})

④接下来就是css样式，自己写啦