JavaScript怎样实现分页效果
导读：这篇文章主要给大家介绍“JavaScript怎样实现分页效果”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“JavaScript怎样实现分页效果”文章能对大家有所帮助。...
这篇文章主要给大家介绍“JavaScript怎样实现分页效果”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“JavaScript怎样实现分页效果”文章能对大家有所帮助。本文实例为大家分享了js实现导航栏分页效果的具体代码，供大家参考，具体内容如下
1、结构搭建HTML代码
div class="page">
/div>
2、页面修饰的css样式代码
.page{
width:500px;
margin:100px auto;
color: #ccc;
}
.page a{
display: inline-block;
color: #428bca;
height: 25px;
line-height: 25px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
vertical-align: middle;
}
.page a:hover{
border: 1px solid #428bca;
}
.page .current{
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #fff;
background-color: #428bca;
border: 1px solid #428bca;
border-radius: 4px;
vertical-align: middle;
}
.page .disabled{
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #bfbfbf;
background: #f2f2f2;
border: 1px solid #bfbfbf;
border-radius: 4px;
vertical-align: middle;
}
3、js代码
// 入口函数 接收参数为扩展插件父级及参数
function init(dom, args) {
// 如果当前显示页数小于总页数
if (args.current = args.pageCount) {
// 填充html页面内容
fillHtml(dom, args);
// 绑定事件
bindEvent(dom, args);
}
else {
alert('请输入正确页数')
}
}
function fillHtml(dom, args) {
// 清空dom元素
dom.empty();
//上一页
if (args.current >
1) {
dom.append('a href = "#" class="prevPage">
上一页/a>
');
}
else {
dom.remove('.prevPage');
dom.append('span class="disabled">
上一页/span>
');
}
//中间页数
if (args.current != 1 &
&
args.current >
= 4 &
&
args.pageCount != 4) {
dom.append('a href = "#" class="tcdNumber">
' + 1 + '/a>
');
}
if (args.current - 2 >
2 &
&
args.current = args.pageCount &
&
args.pageCount >
5) {
dom.append('span>
.../span>
');
}
// 中间页数利用循环生成
var start = args.current - 2;
var end = args.current + 2;
for (;
start = end;
start++) {
if (start = args.pageCount &
&
start >
= 1) {
if (start != args.current) {
dom.append('a href = "#" class="tcdNumber">
' + start + '/a>
');
}
else {
dom.append('span class="current">
' + start + '/span>
');
}
}
}
// 判断临界值插入省略号
if (args.current + 2 args.pageCount - 1 &
&
args.pageCount >
5) {
dom.append('span>
.../span>
')
}
// 将中间数值插入html内容中
if (args.current != args.pageCount &
&
args.current args.pageCount - 2 &
&
args.pageCount != 4) {
dom.append('a href="#" rel="external nofollow" class="tcdNumber">
' + args.pageCount + '/a>
');
}
//下一页 根据当前页数确定按钮显示状态
if (args.current args.pageCount) {
dom.append('a href = "#" class="nextPage">
下一页/a>
');
}
else {
dom.remove('.nextPage');
dom.append('span class="disabled">
下一页/span>
');
}
}
// 点击事件 点击每一页相当于重新调用fillHtml填入参数 修改当前的显示值
function bindEvent(obj, args) {
//点击页码
obj.on('click', '.tcdNumber', function () {
var current = parseInt($(this).text());
changePage(obj, args, current);
}
)
//上一页
// a.prevPage 规定只能添加到指定的子元素上的事件处理程序
obj.on('click', '.prevPage', function () {
var current = parseInt(obj.children('.current').text());
changePage(obj, args, current - 1);
}
)
//下一页
obj.on('click', '.nextPage', function () {
var current = parseInt(obj.children('.current').text());
changePage(obj, args, current + 1);
}
)
}
// 改变html内容
function changePage(dom, args, page) {
fillHtml(dom, {
'current': page, 'pageCount': args.pageCount }
);
if (typeof (args.backFn == "function")) {
args.backFn(page);
}
}
// 利用jquery中的extend方法扩展插件 将插件扩展到jquery的原型上 扩展实例插件
$.fn.createPage = function (options) {
// 拼接参数 即如果调用插件未传入参数选用默认参数
// 如果传入参数 利用传入参数覆盖默认参数
var args = $.extend({
pageCount: 5,
current: 2,
backFn: function () {
}
}
, options);
init(this, args)// 调用入口函数
}
// 调用插件 传入参数
$('.page').createPage({
pageCount: 13,// 总页数
current: 3,// 默认选中页数
// 点击选中页数后 回调
backFn: function (p) {
}
}
)
4、效果图
感谢各位的阅读，以上就是“JavaScript怎样实现分页效果”的内容了，通过以上内容的阐述，相信大家对JavaScript怎样实现分页效果已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： JavaScript怎样实现分页效果
本文地址： https://pptw.com/jishu/655073.html