代码是照着网上视频敲的...
演示效果:
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);