代码是照着网上视频敲的...
演示效果：
html文件代码：
<!DOCTYPE html>
<html>
<head>
<title>分页插件</title>
<meta charset="utf-8">
</head>
<style type="text/css">
#container{
margin-top: 20px;
margin-left: 20px;
}
#container a{
min-width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
color: black;
border: 1px solid #ccc;
padding: 0 5px;
display: inline-block;
}
.active{
background: blue;
opacity: 0.5;
color: white;
}
</style>
<body>
<div id="container">
<!-- <a class="firstPage">首页</a>
<a class="prevPage">上一页</a>
<a class="active">1</a>
<a>2</a>
<a>3</a>
<a>4</a>
<a>5</a>
<a>10</a>
<a class="nextPage">下一页</a>
<a class="lastPage">尾页</a>
<span>共210页</span>
<span>共308条记录</span> -->
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jQuery.page.js"></script>
<script type="text/javascript">
$("#container").page({
pageNO: 2,
totalPage: 10,
totalSize: 20
});
</script>
</body>
</html>
插件 jQueru.page.js代码
;(function($){
$.fn.page = function(options){
var defaults = {
pageNO: 1, //当前页
totalPage: 30, //页码
totalSize: 300 //总页数
}
var settings = $.extend({}, defaults, options);
var that = this
//alert(1)
function createHTML(){ //创建内容
var html = "";
html += "<a class='firstPage'>首页</a><a class='prevPage'>上一页</a>"
//添加页码
if(settings.totalPage > 6){ //总页数大于6
if(settings.pageNO < 5){ //当前页号小于5
for (var i = 1; i <= 5; i++) {
if(i == settings.pageNO){ //当前页
html += "<a class='active'>" + i + "</a>"
}else{
html += "<a>" + i + "</a>"
}
}
html += "..."
html += '<a>' + settings.totalPage + '</a>'
}else{ //页号大于等于5
//判断...的位置
if(settings.pageNO < settings.totalPage - 3){
for(var i = settings.pageNO - 2;i <= settings.pageNO + 2;i++){
if(i == settings.pageNO){ //当前页
html += "<a class='active'>" + i + "</a>"
}else{
html += "<a>" + i + "</a>"
}
}
html += "..."
html += '<a>' + settings.totalPage + '</a>'
}else{
html += '<a>1</a>';
html += '<a>...</a>';
for (var i = settings.totalPage - 4; i <= settings.totalPage; i++) {
if(i == settings.pageNO){ //当前页
html += "<a class='active'>" + i + "</a>"
}else{
html += "<a>" + i + "</a>"
}
}
}
}
}else{ //总页数小于6
for (var i = 1; i <= settings.totalPage; i++) {
if(i == settings.pageNO){ //当前页
html += "<a class='active'>" + i + "</a>"
}else{
html += "<a>" + i + "</a>"
}
}
}
html += "<a class='nextPage'>下一页</a><a class='lastPage'>尾页</a><span>共"+settings.totalPage+"页</span><span>共"+ settings.totalSize +"条记录</span>"
that.html(html)
}
//绑定点击事件
function bindMouse(){
that.on('click', 'a', function(event) {
var attr = $(this).attr('class'); //获取被点击元素的class
var txt = $(this).text();
console.log(typeof txt);
if (attr == 'nextPage') { //点击下一页
settings.pageNO += 1;
if(settings.pageNO > settings.totalPage)
settings.pageNO = settings.totalPage;
}else if(attr == 'firstPage'){ //点击首页
settings.pageNO = 1;
}else if(attr == 'lastPage'){ //点击下一页
settings.pageNO = settings.totalPage;
}else if(attr == 'prevPage'){ //点击上一页
settings.pageNO -= 1;
if(settings.pageNO < 1)
settings.pageNO = 1;
}else{ //点击页码
settings.pageNO = parseInt(txt);
}
createHTML();
});
}
bindMouse();
createHTML();
}
})(jQuery);