码迷，mamicode.com
首页 > Web开发 > 详细

JS-网页中分页栏

时间：2015-12-19 20:36:36      阅读：288      评论：0      收藏：0      [点我收藏+]

标签：

原理

三部分

我给分页栏分成了3部分

  • 上一页:调用prePage()函数
  • 下一页:调用nextPage()函数
  • 带有数字标识的部，调用skipPage()函数

技术分享

prePage函数

function prePage() {
    var val = $(‘#pageLi li.active‘).text();
    // 获取当前li的索引值
    if (val == 1) {
        return;
    }
    var page = val - 1;
    var ind = $(‘#pageLi li.active‘).index();
    ele = $(‘#pageLi li‘).eq(ind - 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

该函数首先判断是否已到第一个，如果已经是第一个了，就不再做处理，否则，需要得到当前页的上一页的值和上一页所在的li控件，最后调用skipPage()

nextPage函数

function nextPage(page) {
    var val = $(‘#pageLi li.active‘).text();
    if (val == $(‘#lastPage‘).text()) {
        return;
    }
    // 获取当前li的索引值
    var ind = $(‘#pageLi li.active‘).index();
    var page = Number(val) + 1;

    ele = $(‘#pageLi li‘).eq(ind + 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

下一页是向下翻页，首先判断时候已到最后一页，如果到了最后一页，我们就不在处理，否则获取当前页的下一页值和’li’控件。

skipPage函数

function skipPage(id, ele) {
    var page = $(ele).text();
    $(‘#pageLi li‘).removeClass("disabled");
    $(‘#pageLi li‘).removeClass("active");
    // $(‘#pageLi li‘).addClass("active");
    $(ele).parent().addClass("active");
    // 给"上一页"按钮添加不可点击样式
    if (page == 1) {
        $(‘#pageLi li:first‘).addClass("disabled");
    }
    // 给"下一页"添加不可点击样式
    // console.log("最大页 :" + $(‘#lastPage‘).text())
    if (page == $(‘#lastPage‘).text()) {
        $("#pageLi li:last-child").addClass("disabled");
        // $(‘#lastLi‘).addClass("disabled");
    }
    // $(‘#omitLi‘).addClass("disabled");
    refreshLi(page, $(ele).parent().index());
}

该函数首先得到页码值，然后清楚所有页码的class信息,给当前要显示的页码添加active样式，使其高亮，然后判断上一页和下一页是否可点击，一切完成后，来到最重要的步骤，更新分页栏上的页码值，因为要符合实际要求就要，每个页面都能选择，所以来看refreshLi方法的实现。

refreshLi函数


function refreshLi(page, ind) {
    console.log("total : " + $(‘#lastPage‘).text());
    if ($(‘#lastPage‘).text() <= 10) {
        return;
    }

    var left = false;
    if ($("#leftOmitLi").children().text() == "...") {
        left = true;
    }
    var right = false;
    if ($("#omitLi").children().text() == "...") {
        right = true;
    }
    parse(left, right, ind);
}

该函数传入的3个参数分别为：

  • left:左省略号是否存在
  • right:右省略号是否存在
  • ind:当前点击的li的索引值

判断的标准就是控件id为leftOmitLi和omitLi的控制中文本值是否为...，然后进入我们的parse函数

parse函数


function parse(left, right, ind) {
    console.log("left : " + left + ",right : " + right + ",ind : " + ind
            + ",totalSize : " + $(‘#lastPage‘).text());
    // 总页数
    var pageTotalSize = Number($(‘#lastPage‘).text());
    if (!left && right) {
        // 只有右省略
        if (ind == rightIndex - 1) {
            // 右省略后的左边第一个,出现左省略,同事右省略左边要+1
            // 点击右省略左边第一个,右省略左边第一个要+1
            console.log("点击 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind < rightIndex - 1) {
            // 点击左边其他，不分页不变化

            // no do
        } else if (ind > rightIndex) {
            // 右省略右边的,右省略消失,左省略出现
            onlyLeft(pageLiCount, pageTotalSize);
        }
    } else if (!right && left) {
        if (ind < leftIndex) {
            // 左省略左边,左省略小时,右省略出现
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // //左省略右边第一个,出现右省略,同时左省略右边第一个要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {
                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind > leftIndex + 1) {
            // 不变化
            // no do
        }
    } else if (left && right) {
        if (ind < leftIndex) {
            // 点击左省略左边,左省略小时,只有右省略
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // 点击左省略的右边第一个,左省略右边第一个要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {

                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind == rightIndex - 1) {
            // 点击右省略左边第一个,右省略左边第一个要+1
            console.log("点击 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind > rightIndex) {
            // 点击右省略右边,右省略消失,只有左省略
            onlyLeft(pageLiCount, pageTotalSize);
        }
    }
}

该函数就有点负责了，我变化之前的情况分了3种：

  • 有左省略
  • 有右省略
  • 既有左省略，也有右省略

针对每个情况有分出很多情况

技术分享

只有左省略

技术分享

1.我此时点击左省略左边的页码(也就是图中的1，2)，应该变成只有有省略的情况代码如下：

// 只有右省略
function onlyRight(pageLiCount, pageTotalSize) {
    console.log("onlyRight");
    for (var i = 1; i <= rightIndex; i++) {
        if (i == leftIndex) {
            $(‘#leftOmitLi‘).removeClass("disabled");
            $(‘#leftOmitLi‘).children().text(leftIndex);
        } else if (i == rightIndex) {
            $(‘#omitLi‘).addClass("disabled");
            $(‘#omitLi‘).children().text("...");
        } else {
            $(‘#pageLi li‘).eq(i).children().text(i);
        }
    }
}

处理完后变成如下所示:

技术分享

2.如果此时我点击左省略号右边第一个，那么应该是什么样的，应该变成即有左省略，也有右省略，且两个省略号中间的数字要递减1.且被点击的页码高亮效果要想后退一格显示，因为页码递减了。代码如下:

// 既有左也有右,左省略号右边第一个
function leftFirstleftAndRight(ind) {
    console.log("leftFirstleftAndRight");
    var text = Number($(‘#pageLi li‘).eq(ind).children().text()) - 1;
    console.log("text : " + text)
    var d = 0;
    for (var i = leftIndex + 1; i < rightIndex; i++) {
        $(‘#pageLi li‘).eq(i).children().text(text + (d++));
    }
    $(‘#pageLi li‘).eq(leftIndex + 1).removeClass("active");
    $(‘#pageLi li‘).eq(leftIndex + 2).addClass("active");
    $(‘#leftOmitLi‘).addClass("disabled");
    $(‘#leftOmitLi‘).children().text("...");
    $(‘#omitLi‘).addClass("disabled");
    $(‘#omitLi‘).children().text("...");
}

处理完的效果如下:

技术分享

但是这个时候也有一个情况需要判断就是，当中间第一个的数字和右边的2差两个的话，比如上面我再点击一次5的话，这个时候出现了4，5，6，而4和2相差2，这个时候再点击4的话，需要把左省略去掉了，因为没有多余的数字了，只有一个3了，你还隐藏啥,所以我们做了判断如下，如果是刚才这种情况，直接变成只有右省略的情况，

// //左省略右边第一个,出现右省略,同时左省略右边第一个要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {
                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }

变化后的效果如下：

技术分享

3.第三种情况我们不做处理，原因自己理解。

只有右省略

技术分享

1.点击右省略左边最靠近的第一个，比如上图中的7。
这个时候需要出现左省略，然后中间部分递增+1

技术分享

这个地方也有一个例外，就是当点击的点与右省略右边第一个相差2个的时候，我们也会变成只有左省略的情况，所以代码中做了判断，如下

if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }

效果如下：

技术分享

2.点击右省略右边，变成左省略。那我们就调用左省略函数onlyRight

技术分享

3.点击右省略左边除最靠近的第一个外，不做处理。

既有左省略，也有右省略

技术分享

这个地方其实涵盖了上面的所有情况，不再叙说

总结

做这个分页栏的时候，比较容易造成混淆的是，li的索引值和其问文本值是没有关联的，所以在变化值的时候要以文本值来递减(增)，不能以索引值来递减(增)。

最近在写网页，用JS手写了一个分页栏

效果

技术分享

html代码

<ul class="pagination pagination-sm" id="pageLi">
    <li class="disabled"><a href="javascript:;" onClick="prePage()">&laquo;</a></li>
    <li class="active"><a href="javascript:;"onClick="skipPage(1,this)">1</a></li>
    <li><a href="javascript:;" onClick="skipPage(2,this)">2</a></li>
    <li id="leftOmitLi"><a href="javascript:;"onClick="skipPage(3,this)">3</a></li>
    <li><a href="javascript:;" onClick="skipPage(4,this)">4</a></li>
    <li><a href="javascript:;" onClick="skipPage(5,this)">5</a></li>
    <li><a href="javascript:;" onClick="skipPage(6,this)">6</a></li>
    <li><a href="javascript:;" onClick="skipPage(7,this)">7</a></li>
    <li class="disabled" id="omitLi"><a href="javascript:;"onClick="skipPage(9,this)">...</a></li>
    <li><a href="javascript:;" onClick="skipPage(11,this)">11</a></li>
    <li><a href="javascript:;" onClick="skipPage(12,this)" id="lastPage">12</a></li>
    <li id="lastLi"><a href="javascript:;" onClick="nextPage()">&raquo;</a></li>
</ul>

Js代码


// 分页栏的数量
var pageLiCount = 10;
// 左边省略出现的位置
var leftIndex = 3;
// 右边省略出现的位置
var rightIndex = 8;
var totalPage = $(‘#lastPage‘).text();

function skipPage(id, ele) {
    var page = $(ele).text();
    var tablebody = $("#resultTable tbody");
    $(‘#pageLi li‘).removeClass("disabled");
    $(‘#pageLi li‘).removeClass("active");
    // $(‘#pageLi li‘).addClass("active");
    $(ele).parent().addClass("active");
    // 给"上一页"按钮添加不可点击样式
    if (page == 1) {
        $(‘#pageLi li:first‘).addClass("disabled");
    }
    // 给"下一页"添加不可点击样式
    // console.log("最大页 :" + $(‘#lastPage‘).text())
    if (page == $(‘#lastPage‘).text()) {
        $("#pageLi li:last-child").addClass("disabled");
        // $(‘#lastLi‘).addClass("disabled");
    }
    // $(‘#omitLi‘).addClass("disabled");
    refreshLi(page, $(ele).parent().index());
    $
            .get(
                    "/rs/resultByPage/" + page,
                    function(response) {
                        console.log(response);
                        var data = eval(response);
                        if (data.length != 0) {
                            tablebody.html("");
                            for (var i = 0; i < data.length; i++) {
                                console.log(data[i]);
                                $(
                                        "<tr>" + "<td>"
                                                + data[i].id
                                                + "</td>"
                                                + "<td>"
                                                + data[i].uid
                                                + "</td>"
                                                + "<td>"
                                                + data[i].appversionEntity.version
                                                + "</td>"
                                                + "<td>"
                                                + data[i].appversionEntity.productid
                                                + "</td>"
                                                + "<td>"
                                                + data[i].uploadtime
                                                + "</td>"
                                                + "<td>"
                                                + "<button type=\"button\" class=\"btn btn-danger\" onClick=\"deleteViewtypeById("
                                                + data[i].id
                                                + ")\">"
                                                + "删除</button><button type=\"button\" class=\"btn btn-info\" onClick=\"goUpdateViewtype("
                                                + data[i].id
                                                + ")\""
                                                + " id=\"updateViewtypeButton\">"
                                                + "详情</button>" + "</td>"
                                                + "</tr>").appendTo(tablebody);

                            }

                        }
                    });

}

function prePage() {
    var val = $(‘#pageLi li.active‘).text();
    // 获取当前li的索引值
    if (val == 1) {
        return;
    }
    var page = val - 1;
    var ind = $(‘#pageLi li.active‘).index();
    ele = $(‘#pageLi li‘).eq(ind - 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

function nextPage(page) {
    var val = $(‘#pageLi li.active‘).text();
    if (val == $(‘#lastPage‘).text()) {
        return;
    }
    // 获取当前li的索引值
    var ind = $(‘#pageLi li.active‘).index();
    var page = Number(val) + 1;

    ele = $(‘#pageLi li‘).eq(ind + 1).children();
    console.log("page : " + page + ",ele :" + ele);
    skipPage(page, ele);
}

function refreshLi(page, ind) {
    console.log("total : " + $(‘#lastPage‘).text());
    if ($(‘#lastPage‘).text() <= 10) {
        return;
    }

    var left = false;
    if ($("#leftOmitLi").children().text() == "...") {
        left = true;
    }
    var right = false;
    if ($("#omitLi").children().text() == "...") {
        right = true;
    }
    parse(left, right, ind);
}

function parse(left, right, ind) {
    console.log("left : " + left + ",right : " + right + ",ind : " + ind
            + ",totalSize : " + $(‘#lastPage‘).text());
    // 总页数
    var pageTotalSize = Number($(‘#lastPage‘).text());
    if (!left && right) {
        // 只有右省略
        if (ind == rightIndex - 1) {
            // 右省略后的左边第一个,出现左省略,同事右省略左边要+1
            // 点击右省略左边第一个,右省略左边第一个要+1
            console.log("点击 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind < rightIndex - 1) {
            // 点击左边其他，不分页不变化

            // no do
        } else if (ind > rightIndex) {
            // 右省略右边的,右省略消失,左省略出现
            onlyLeft(pageLiCount, pageTotalSize);
        }
    } else if (!right && left) {
        if (ind < leftIndex) {
            // 左省略左边,左省略小时,右省略出现
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // //左省略右边第一个,出现右省略,同时左省略右边第一个要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {
                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind > leftIndex + 1) {
            // 不变化
            // no do
        }
    } else if (left && right) {
        if (ind < leftIndex) {
            // 点击左省略左边,左省略小时,只有右省略
            onlyRight(pageLiCount, pageTotalSize);
        } else if (ind == leftIndex + 1) {
            // 点击左省略的右边第一个,左省略右边第一个要-1
            if ($(‘#pageLi li‘).eq(ind).children().text() == 4) {

                onlyRight(pageLiCount, pageTotalSize);
            } else {
                leftFirstleftAndRight(ind);
            }
        } else if (ind == rightIndex - 1) {
            // 点击右省略左边第一个,右省略左边第一个要+1
            console.log("点击 : " + $(‘#pageLi li‘).eq(ind).children().text())
            if (Number($(‘#pageLi li‘).eq(ind).children().text()) == pageTotalSize - 4) {
                onlyLeft(pageLiCount, pageTotalSize);
            } else {
                rightFirstleftAndRight(ind);
            }
        } else if (ind > rightIndex) {
            // 点击右省略右边,右省略消失,只有左省略
            onlyLeft(pageLiCount, pageTotalSize);
        }
    }
}
// --------------变成什么样,如下所示
// 只有左省略
function onlyLeft(pageLiCount, pageTotalSize) {
    console.log("onlyLeft");
    for (var i = pageLiCount; i >= leftIndex; i--) {
        if (i == leftIndex) {
            $(‘#leftOmitLi‘).addClass("disabled");
            $(‘#leftOmitLi‘).children().text("...");
        } else if (i == rightIndex) {
            $(‘#omitLi‘).removeClass("disabled");
            $(‘#omitLi‘).children().text(pageTotalSize - 2);
        } else {
            var inText = pageTotalSize - (pageLiCount - i);
            $(‘#pageLi li‘).eq(i).children().text(inText);
        }
    }
}

// 只有右省略
function onlyRight(pageLiCount, pageTotalSize) {
    console.log("onlyRight");
    for (var i = 1; i <= rightIndex; i++) {
        if (i == leftIndex) {
            $(‘#leftOmitLi‘).removeClass("disabled");
            $(‘#leftOmitLi‘).children().text(leftIndex);
        } else if (i == rightIndex) {
            $(‘#omitLi‘).addClass("disabled");
            $(‘#omitLi‘).children().text("...");
        } else {
            $(‘#pageLi li‘).eq(i).children().text(i);
        }
    }
}

// 既有左也有右,左省略号右边第一个
function leftFirstleftAndRight(ind) {
    console.log("leftFirstleftAndRight");
    var text = Number($(‘#pageLi li‘).eq(ind).children().text()) - 1;
    console.log("text : " + text)
    var d = 0;
    for (var i = leftIndex + 1; i < 8; i++) {
        $(‘#pageLi li‘).eq(i).children().text(text + (d++));
    }
    $(‘#pageLi li‘).eq(leftIndex + 1).removeClass("active");
    $(‘#pageLi li‘).eq(leftIndex + 2).addClass("active");
    $(‘#leftOmitLi‘).addClass("disabled");
    $(‘#leftOmitLi‘).children().text("...");
    $(‘#omitLi‘).addClass("disabled");
    $(‘#omitLi‘).children().text("...");
}
// 既有左也有右,右省略号左边第一个
function rightFirstleftAndRight(ind) {
    console.log("rightFirstleftAndRight");
    console.log("内容为 : " + $(‘#pageLi li‘).eq(ind).text())
    var text = Number($(‘#pageLi li‘).eq(ind).text());
    var d = 1;
    for (var i = rightIndex - 1; i > leftIndex; i--) {
        console.log("text : " + text + ",d = " + d)
        $(‘#pageLi li‘).eq(i).children().text(text + (d--));
    }
    $(‘#pageLi li‘).eq(rightIndex - 1).removeClass("active");
    $(‘#pageLi li‘).eq(rightIndex - 2).addClass("active");
    $(‘#leftOmitLi‘).addClass("disabled");
    $(‘#leftOmitLi‘).children().text("...");
    $(‘#omitLi‘).addClass("disabled");
    $(‘#omitLi‘).children().text("...");
}

JS-网页中分页栏

标签：

原文地址：http://blog.csdn.net/itfootball/article/details/50358483
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！