JS-网页中分页栏

原理

三部分

我给分页栏分成了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("...");
}
时间： 2024-08-07 14:29:29

JS-网页中分页栏的相关文章

js网页中调用本地应用程序

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test ActiveXObject</title> <script> function Run(command) { windo

VBS一键配置VOIP（其中包括VBS操作JS网页中的按钮事件--直接执行确认按钮中的脚本代码）

Dim ws,fso,IESet IE = WScript.createobject("InternetExplorer.Application")Set ws = WScript.CreateObject ("WSCript.shell")Set fso=CreateObject("scripting.filesystemobject") Const reboot="/content.cgi?form=M_SAV" IE.m

Dreamweaver中用css载入bg-image图片在设计栏不出现但可在网页中正常显示

刚开始以为是dreamweaver软件自身问题,但重启几次软件之后发现不是软件问题,检查css语法也没有问题,又以为是css中某些div遮住了图片,去掉有可能影响图片的div后,发现问题仍在,最后只能去html中寻找问题原因,最终发现少写了</div>,调整后可正常显示. 代码: <div class="divContent"> <div class="divTable"> </div> 修改: <div cla

JS获取网页中HTML元素的几种方法分析

getElementById getElementsByName getElementsByTagName 大概介绍 getElementById ,getElementsByName ,getElementsByTagName ###adv### 后两个是得到集合,byid只是得到单个对象 getElementById 的用法 举个例子: <a id="link1" name="link1" href=http://homepage.yesky.com>

Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具，她将被启动于其他网页之后，为了协助您了解目标网页中 JavaScript 的运行情况

1 概述 Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 JavaScript 的运行情况,包括:执行覆盖率.执行行数.是否存在执行或语法错误等信息,当你对一个目标网页使用 Tracker,该网页的上方将加载进来一个 Tracker 导航栏. 不用安装,快速开始 也欢迎体验桌面客户端版 Tracker 是一个运行于浏览器书签栏的 JavaScript 嗅探工具,她将被启动于其他网页之后,为了协助您了解目标网页中 Ja

网页中最常用的JS代码（js禁止右键、禁止复制，设为首页，加入收藏代码）

<body oncontextmenu=”return false”></body> <!– 禁用右键: –> <script> function stop(){ return false; } document.oncontextmenu=stop; </script> <body onselectstart=”return false”> 取消选取.防止复制 oncopy=”return false;” oncut=”return

Java使用正则表达式取网页中的一段内容(以取Js方法为例)

关于正则表达式: 表1.常用的元字符 代码 说明 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 \b 匹配单词的开始或结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 表2.常用的限定符 代码/语法 说明 * 重复零次或更多次 + 重复一次或更多次 ? 重复零次或一次 {n} 重复n次 {n,} 重复n次或更多次 {n,m} 重复n到m次 表3.常用的反义代码 代码/语法 说明 \W 匹配任意不是字母,数字,下划线,汉字的字符 \S

利用Google Chrome开发插件，在网页中植入js代码

Google Chrome是一个很强大的浏览器,提供了各种各样的插件,大大提升了使用了的效率,比如vimium.honx等. Google在提供这些插件的同时还允许用户开发自己的插件. 最近在写js的脚本采集程序,需要测试在网页中的运行情况,因此可以利用Chrome插件进行测试. 1.首先第一步是新建一个文件夹,并新建一个manifest.json文件,内容如下 { "manifest_version": 2, "name": "Js implants&q

【iOS】网页中调用JS与JS注入

很多应用为了节约成本,做出同时在Android与iOS上都能使用的界面,这时就要使用WebView来做.Android和IOS上都有WebView,做起来很省事.当然这时就要考虑如何在Android或iOS中实现与网页的交互.对iOS而言,包括如何在网页中调用OC,以及如何在OC中对网页进行操作. 先将网页弄到iOS项目中: 网页内容如下, 仅供测试: <html> <head> <meta xmlns="http://www.w3.org/1999/xhtml&q