ES6模板字符串分页实现

2017-03-21 本文已影响59人谢聃

原生分页的思路（原理）：
首先和产品经理定一下每页显示多少条目，

然后通过后台的某一个数据接口，获取某一页的数据（需要给这个接口传入页码这个参数），
咱们仅仅需要去如何显示数据即可。
术语：页码、每页显示条目、数据总数、每页数据列表
其中每页显示条目是动态的（咱们这个demo暂时定义为每页显示5条数据）
总数是接口里提供的，页码数需要根据总数和每页条目数去计算的

//全局缓存所有数据（为了计算某一页的数据，注意：将来真实开发不需要这么做）

            var personsList = null;
            //全局缓存数据总条数（select count(*) from person ）
            var totalCount = 0;
            //当前页码
            var currentPageNo = 1;
            
            //计算有多少页（初始化页码按钮）
            function initBtn () {
                $.getJSON('data.json', null, function (resultData) {
                    console.log(resultData);
                    //缓存到本地
                    personsList = resultData.persons;
                    totalCount = resultData.totalCount;
                    
                    //定义模板字符串
                    var str = ``;
                    
                    //页码个数（页码按钮） = 向上取整(数据总数 / 每页条目（默认5条）)
                    for (var i = 1; i <= Math.ceil(totalCount / 5); i++) {
                        //创建页码按钮
                        if (i == 1) {
                            str += `<a href="###" name="p" style="background:orange;color:#fff;">${ i }</a>`;   
                        } else {
                            str += `<a href="###" name="p" >${ i }</a>`;
                        }
                    }
                    $('.prev').after(str);
                    
                    
                    //给所有按钮办定事件
                    $('.fenye a').on('click', fenyeFn);
                    
                    //默认显示第一页的数据
                    showData(currentPageNo);
                });
            }
            
            initBtn();
            
            //构建某一页的数据
            function showData (pageNo) {
                //这里是为了模拟后台操作，去匹配某一页的数据，将来真实开发不需要写以下这个算法
                var currentArr = personsList.slice((pageNo - 1) * 5, pageNo * 5);
//              console.log(currentArr);
                var str = ``;
                for (var tempPerson of currentArr) {
                    str += `<tr>
                                <td>${ tempPerson.name }</td>
                                <td>${ tempPerson.sex }</td>
                                <td>${ tempPerson.age }</td>
                                <td>${ tempPerson.addr }</td>
                            </tr>`;
                }
                $('tbody').html(str);
            }
            
            //分页按钮点击逻辑
            function fenyeFn () {
                //1、处理页码数的逻辑
//              console.log($(this).html());
                switch ($(this).html()) {
                    case '首页':
                        currentPageNo = 1;
                    break;
                    case '<<上一页':
                        currentPageNo--;
                    break;
                    case '下一页>>':
                        currentPageNo++;
                    break;
                    case '尾页':
                        currentPageNo = Math.ceil(totalCount / 5);
                    break;
                    default:
                        currentPageNo = parseInt($(this).html());
                }
                console.log(currentPageNo);

//2、处理首尾、上下按钮的隐藏显示逻辑

            if (currentPageNo == 1) {
                $('.start').css('display', 'none');
                $('.prev').css('display', 'none');
            } else {
                $('.start').css('display', 'inline-block');
                $('.prev').css('display', 'inline-block');
            }
            
            if (currentPageNo == Math.ceil(totalCount / 5)) {
                $('.end').css('display', 'none');
                $('.next').css('display', 'none');
            } else {
                $('.end').css('display', 'inline-block');
                $('.next').css('display', 'inline-block');
            }

//3、处理按钮颜色的逻辑

            //获取页码按钮
            var $pageBtn = $('[name=p]');
            //先把这几个按钮的样式还原成默认
            $pageBtn.css({
                background : '#fff',
                color : '#999'
            });
            //然后在处理当前页码数对应的按钮样式
            $pageBtn[currentPageNo - 1].style.background = 'orange';
            $pageBtn[currentPageNo - 1].style.color = '#fff';
            
            //4、显示数据
            showData(currentPageNo);
        }

上面的部分：

    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <script type="text/javascript" src="lib/jquery.js" ></script>

截屏效果图

<body>

    <table id="my_table" border="1px">
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>住址</th>
            </tr>
        </thead>
        <tbody>
             <!--<tr>
                <td>刘升升</td>
                <td>男</td>
                <td>18</td>
                <td>二拨子新村</td>
            </tr>
            <tr>
                <td>刘升升</td>
                <td>男</td>
                <td>18</td>
                <td>二拨子新村</td>
            </tr>
            <tr>
                <td>刘升升</td>
                <td>男</td>
                <td>18</td>
                <td>二拨子新村</td>
            </tr>
            <tr>
                <td>刘升升</td>
                <td>男</td>
                <td>18</td>
                <td>二拨子新村</td>
            </tr> -->
        </tbody>
    </table>
    <div class="fenye">
        <a href="###" class="start">首页</a>
        <a href="###" class="prev"><<上一页</a>
        <!--<a href="###" name="p" style="background:orange;color:#fff;">1</a>
        <a href="###" name="p" >2</a>
        <a href="###" name="p" >3</a>-->
        <a href="###" class="next">下一页>></a>    
        <a href="###" class="end" >尾页</a>       
    </div>

ES6模板字符串分页实现

猜你喜欢

热点阅读