JavaScript 数据分页算法

最新推荐文章于 2022-08-19 17:37:08 发布

RONG51920

最新推荐文章于 2022-08-19 17:37:08 发布

阅读量192

点赞数

分类专栏： JavaScript基础前端文章标签： JavaScript 数据分页

本文链接：https://blog.csdn.net/RONG51920/article/details/100105429

版权

前端同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JavaScript基础

3 篇文章 0 订阅

订阅专栏

数据分页算法（简单）

HTML布局

// An highlighted block
 <!DOCTYPE html>
<html>
<head></head>
<body>
<div class="b1">
	 <button id="uppage">上一页</button>
	 <ul class="menu">
        <li class="bgcolor">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button id="downpage">下一页</button>
</div>
</body>
</html>

CSS样式

// An highlighted block
 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .b1 > ul {
            display: inline-block;
        }
        .b1 > ul > li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid silver;
        }
        .b1 > button {
            width: 100px;
            height: 30px;
            border: 1px solid silver;
            background: transparent;
            outline: none;
        }
        .bgcolor {
            background: #32bcff;
            color: #fff;
        }
    </style>

JavaScript 分页算法

// An highlighted block
<script>
    var uppage = document.getElementById("uppage");
    var downpage = document.getElementById("downpage");
    var menu = document.getElementsByClassName("menu")[0].children;
    downpage.onclick = function () {
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) + 10;
        }
    }
    uppage.onclick = function () {
        if (parseInt(menu[0].innerHTML) <= 1) {
            return;
        }
        for (var i = 0; i < menu.length; i++) {
            menu[i].innerHTML = parseInt(menu[i].innerHTML) - 10;
        }
    }
    for (var i = 0; i < menu.length; i++) {
        menu[i].onclick = function () {
            for (var k = 0; k < menu.length; k++) {
                menu[k].className = "";
            }
            this.className = "bgcolor";
        }
    }
</script>

数据分页算法（复杂）

HTML布局

// An highlighted block
 <!DOCTYPE html>
<html>
<head></head>
<body>
<div class="b1">
    <button id="uppage">上一页</button>
    <ul class="menu">
    </ul>
    <button id="downpage">下一页</button>
</div>
</body>
</html>

CSS样式

// An highlighted block
<style>
        * {
            margin: 0;
            padding: 0;
        }
        .b1 > ul {
            display: inline-block;
        }
        .b1 > ul > li {
            list-style: none;
            display: inline-block;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border: 1px solid silver;
        }
        .b1 > button {
            width: 100px;
            height: 30px;
            border: 1px solid silver;
            background: transparent;
            outline: none;
        }
    </style>

JavaScript分页算法

// An highlighted block
<script>
    window.onload = function () {
        var menu = document.getElementsByClassName("menu")[0];
        var nowpage = 1;
        var totlepage = 20;
        menu.innerHTML = showmenu(nowpage, totlepage);
        var downpage = document.getElementById("downpage");
        var uppage = document.getElementById("uppage");
        downpage.onclick = function () {
            nowpage++;
            if (nowpage > totlepage) {
                nowpage = totlepage;
            }
            menu.innerHTML = showmenu(nowpage, totlepage);
        }
        uppage.onclick = function () {
            nowpage--;
            if (nowpage < 1) {
                nowpage = 1;
            }
            menu.innerHTML = showmenu(nowpage, totlepage);
        }
    }
    function showmenu(current, totlepage) {
        var str = "";
        for (var i = 1; i <= totlepage; i++) {
            if (i == 2 && i < current - 5) {
                i = current - 3;
                str += "<li>...</li>";
            }
            else if (i == current + 5 && current + 5 < totlepage) {
                i = totlepage - 1;
                str += "<li>...</li>";
            }
            else {
                if (i == current) {
                    str += "<li style='background: #32bcff;color: #fff;'>" + i + "</li>"
                }
                else {
                    str += "<li>" + i + "</li>"
                }
            }
        }
        return str;
    }
</script>