首页手记用本地存储实现翻页的效果

用本地存储实现翻页的效果

标签：

Html/CSS JQuery JavaScript

需求是这样的
点击数字或者点击上一页、下一页等，翻页栏样式变化及从后台加载相应数据。

加入总共20页，只显示10个数字按钮，以及下一页，上一页等。
当从后台加载的页id>=6和<=16时，第六个数字按钮总是显示当前的加载的页，效果如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻页</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://cdn.staticfile.org/jquery/1.11.2/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "微软雅黑"
        }
        .page-turning-wrap{
            text-align: center;
        }
        .page-turning-wrap a{
            display: inline-block;
            height: 30px;
            line-height: 28px;
            background-color: #fff;
            border:1px solid #39b245;
            cursor: pointer;
            color: #39b245;
            font-size: 14px;
            margin-right: 6px;
            text-decoration: none;
        }
        .page-turning-wrap a:hover,.page-turning-index a.active{
            background-color: #39b245;
            color: #fff;
        }
        .page-turning-pre a,.page-turning-next a{
            width: 60px;
        }
        .page-turning-next a:last-child{
            margin-right: 0;
        }
        .page-turning-index a{
            width: 30px;
        }
    </style>
</body>
</head>
<body>
    <div class="page-turning-wrap">
        <span class="page-turning-pre">
            <a data-page-turning="first">首页</a>
            <a data-page-turning="pre">上一页</a>
        </span>
        <span class="page-turning-index">
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
            <a>5</a>
            <a>6</a>
            <a>7</a>
            <a>8</a>
            <a>9</a>
            <a>10</a>
        </span>
        <span class="page-turning-next">
            <a data-page-turning="next">下一页</a>
            <a data-page-turning="last">尾页</a>
        </span>
    </div>
    <script type="text/javascript">
        var firstPageId; // 第一个数字按钮
        var total = 20 + ""; // 总共多少页
        var showTotal = 10;  // 展示多少个数字按钮
        // jquery对象集合
        var jqueryMap = {
            pageIndex : $(".page-turning-index a")
        }
        // 模拟页面刷新
        $(".page-turning-wrap a").attr("href","");
        // 初始化
        pageTurning()

        // 事件 判断点击的是哪种类型的按钮，然后根据当前是第几页，把下一次该打开的页数存入浏览器
        $("[data-page-turning]").click(function(){
            // 根据data-page-turning获取点击的是哪种类型按钮
            var data_page_turning = $(this).attr("data-page-turning"); 
            // 存入浏览器下一次打开页数的localStorage 中的值，根据按钮不同，赋值方式不同
            var page_turning; 
            if ($(this).parent().hasClass("page-turning-index")) {
                page_turning = data_page_turning;
            }else{
                switch(data_page_turning)
                {
                case "first":
                  page_turning = "1";
                  break;
                case "pre":
                  if ($(".page-turning-wrap a.active").prev().length>0) {
                    page_turning = $(".page-turning-wrap a.active").prev().attr("data-page-turning")
                  }else{
                    alert("没有上一页")
                  }
                  break;
                case "last":
                  page_turning = total;
                  break;
                case "next":
                  if ($(".page-turning-wrap a.active").next().length>0) {
                    page_turning = $(".page-turning-wrap a.active").next().attr("data-page-turning")
                  }else{
                    alert("没有下一页")
                  }
                  break;
                default:
                  alert("存在未知错误")
                }
            }
            if (page_turning) {
                setLocalStorage("page_turning",page_turning)
            }

        })

        // 初始化函数
        function pageTurning(){
            if (!localStorage) {
                alert("请更换浏览器")
            }
            // 获取存储的页数
            var pageId = getLocalStorage("page_turning");
            // 示例，展示10个数字，如果pageId<=6 ,或者不存在（第一次打开）
            // 展示的第一个数字按钮为1
            // 这个if语句是为了实现一个效果，可运行代码查看家
            if (!pageId) {pageId=1;}
            if (!pageId  pageId<=showTotal/2 +1) {
                firstPageId = 1;
            // 示例：展示10个数字按钮，总共20页，pageId>14时，第一个数字按钮是1
            }else if (pageId>total-showTotal/2 -1) {
                firstPageId = total-showTotal +1;
            }
            // 示例：展示10个数字，总共20页，第一个数字是pageId-5
            else{
                firstPageId = pageId-showTotal/2;
            }

            // 根据firstPageId配置数字按钮的文本和属性
            jqueryMap["pageIndex"].each(function(index){
                $(this).text(parseInt(firstPageId)+index)
                $(this).attr("data-page-turning",$(this).text())
            })
            // 为pageId的数字按钮添加样式
            $('[data-page-turning="'+ pageId +'"]').addClass("active").siblings().removeClass("active");
            // 从后台加载pageId页
            alert("应该从后台加载第" + pageId +"页" )
        }
        // 设置本地存储的方法
        function setLocalStorage(key,value){
            return localStorage.setItem(key,value)
        }
        // 获取本地存储的方法
        function getLocalStorage(key){
            return localStorage.getItem(key)
        }
    </script>
</html>

上面的代码是模拟页面刷新的，如果用ajax的话，思路是一样的，存值取值。

点击查看更多内容