分页样式如下：
<div id="page1" class="page_div"></div>
<script src="js/paging.js"></script>
js:
$("#page1").paging({
totalPage: 2
//总条数
callback: function(num) {
}
})
CSS:
/*
*/
.page_div {
margin-top: 20px;
margin-bottom: 20px;
font-size: 15px;
font-family: "microsoft yahei";
color: #666666;
margin-right: 30px;
padding-left: 20px;
box-sizing: border-box;
float: right;
}
/*
* 页数按钮样式
*/
.page_div a {
min-width: 30px;
height: 28px;
border: 1px solid #dce0e0!important;
text-align: center;
margin: 0 4px;
cursor: pointer;
line-height: 28px;
color: #666666;
font-size: 13px;
display: inline-block;
background: #fff;
}
#firstPage, #lastPage {
width: 50px;
color: #0073A9;
border: 1px solid #0073A9!important;
}
#prePage, #nextPage {
width: 70px;
color: #0073A9;
border: 1px solid #0073A9!important;
}
.page_div .current {
background-color: #0073A9;
border-color: #0073A9;
color: #FFFFFF;
}
.totalPages {
margin: 0 10px;
color: #fff;
}
.totalSize {
color: #fff;
}
.totalPages span, .totalSize span {
margin: 0 5px;
}
paging.js :
(function($, window, document, undefined) {
//定义分页类
function Paging(element, options) {
this.element = element;
//传入形参
this.options = {
||1,
//根据形参初始化分页html和css代码
this.init();
//对Paging的实例对象添加公共的属性和方法
= {
function() {
this.creatHtml();
this.bindEvent();
function() {
var me = this;
var content = "";
var current = me.options.pageNo;
var total = me.options.totalPage;
var totalNum = me.options.totalSize;
+= "<a id=\"firstPage\">首页</a><a id='prePage'>上一页</a>";
//总页数大于6时候
if(total > 6) {
//当前页数小于5时显示省略号
if(current < 5) {
for(var i = 1; i < 6; i++) {
if(current == i) {
+= "<a class='current'>" + i + "</a>";
else {
+= "<a>" + i + "</a>";
+= ". . .";
+= "<a>"+total+"</a>";
else {
//判断页码在末尾的时候
if(current < total - 3) {
for(var i = current - 2; i < current + 3; i++) {
if(current == i) {
+= "<a class='current'>" + i + "</a>";
else {
+= "<a>" + i + "</a>";
+= ". . .";
+= "<a>"+total+"</a>";
else {
+= "<a>1</a>";
+= ". . .";
for(var i = total - 4; i < total + 1; i++) {
if(current == i) {
+= "<a class='current'>" + i + "</a>";
else {
+= "<a>" + i + "</a>";
//页面总数小于6的时候
else {
for(var i = 1; i < total + 1; i++) {
if(current == i) {
+= "<a class='current'>" + i + "</a>";
else {
+= "<a>" + i + "</a>";
+= "<a id='nextPage'>下一页</a>";
+= "<a id=\"lastPage\">βҳ</a>";
+= "<span class='totalPages'> 共<span>"+total+"</span>ҳ </span>";
+= "<span class='totalSize'> 共<span>"+totalNum+"</span>条记录 </span>";
//添加页面操作事件
function() {
var me = this;
'click', 'a');
'click', 'a', function() {
var num = $(this).html();
var id=$(this).attr("id");
if(id == "prePage") {
if(me.options.pageNo == 1) {
= 1;
else {
= +me.options.pageNo - 1;
else if(id == "nextPage") {
if(me.options.pageNo == me.options.totalPage) {
= me.options.totalPage
else {
= +me.options.pageNo + 1;
else if(id =="firstPage") {
= 1;
else if(id =="lastPage") {
= me.options.totalPage;
else{
= +num;
if(me.options.callback) {
//通过jQuery对象初始化分页对象
= function(options) {
return new Paging($(this), options);
})(jQuery, window, document);
文章来源: jq分页插件