分页-pagination

需先引入jQuery，再引入pagination组件

<script src="jquery.js"></script>

<script src="jquery.pagination.js"></script>

组件样式与功能分离，自定义样式（注：这里加样式是为了示例看的清楚，操作方便。）

< 5 6 7 89>

当前是第8页

HTML

<div class="M-box"></div>

Javascript

$('.M-box').pagination({
    callback:function(index){
        $('.now').text(index);
    }
},function(api){
    $('.now').text(api.getCurrent());
});

12345...末页下页

开启第一页和最后一页的按钮,并且内容可自定义。内容默认为1和总页数。（注：如coping为false，homePage和endPage无效。）

HTML

$('.M-box2').pagination({
    coping:true,
    homePage:'首页',
    endPage:'末页',
    prevContent:'上页',
    nextContent:'下页'
});

< 1 2 3 4567...20>

总数据100条，每页显示5条，总页数为20页 
如果配置了数据总数和当前一页显示多少条数据，总页数会自动计算，这种情况下再配置总页数无效。 
（注：数据总数totalData和每页显示的条数showData必须同时配置，否则默认使用总页数pageCount。）

HTML

<div class="M-box1"></div>

Javascript

$('.M-box1').pagination({
    totalData:100,
    showData:5
    coping:true
});

上页 首页... 15 16 17 18192021...末页下页跳转

参数：jump，开启跳转到第几页，跳转按钮文本内容可修改。（如果超出最大页数会变成总页数的值）

HTML

<div class="M-box3"></div>

Javascript

$('.M-box3').pagination({
    pageCount:50,
    jump:true,
    coping:true,
    homePage:'首页',
    endPage:'末页',
    prevContent:'上页',
    nextContent:'下页'
});

options(参数配置)

参数	默认值	说明
pageCount	9	总页数
totalData	0	数据总条数
current	1	当前第几页
showData	0	每页显示的条数
prevCls	'prev'	上一页class
nextCls	'next'	下一页class
prevContent	'<'	上一页节点内容
nextContent	'>'	下一页节点内容
activeCls	'active'	当前页选中状态class名
count	3	当前选中页前后页数
coping	false	是否开启首页和末页，值为boolean
homePage	''	首页节点内容，默认为空
endPage	''	尾页节点内容，默认为空
jump	false	是否开启跳转到指定页数，值为boolean类型
jumpIptCls	'jump-ipt'	文本框内容
jumpBtnCls	'jump-btn'	跳转按钮class
jumpBtn	'跳转'	跳转按钮文本内容
callback	function(){}	回调函数，参数"index"为当前页

api接口

方法	说明
getTotalPage()	获取总页数
getCurrent()	获取当前页
filling()	填充数据，参数为页数

转载于:https://www.cnblogs.com/jxldjsn/p/5564160.html