Loading

利用bootstrap3的分页样式和jq实现分页功能

1源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
</head>

<body>
    <div style="width:45%;height:45%;margin-left:30%;">
        <table class="table table-hover" id="pageShow">
            <tr>
                <th>name</th>
                <th>age</th>
                <th>phone</th>
            </tr>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination" id="page">
                <li class="prePage">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
    <script>
        $(function() {
            var data = Mock.mock({
                'list|10-40': [{
                    'id|+1': 1,
                    'name|3-5': 'zx',
                    'age|10-30': 1,
                    'phone|10000-15000': 1
                }]
            });
            data = data.list
            var pageSize = 5; //每页的条数
            var totalPage = Math.ceil(data.length / pageSize); //总页数
            var currentPage; //当前页数
            var startData; //开始的数据
            var endData; //结尾的数
            for (let i = 1; i <= totalPage; i++) {
                $('#page').append('<li class="page-item"><a href="#">' + i + '</a></li>');
            }
            $('#page').append(
                `<li class="nextPage">
                  <a href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                  </a>
               </li>`);

            function pageination(i) {
                currentPage = i;
                console.log('第' + currentPage + '页...');
                startData = (currentPage - 1) * pageSize;
                endData = currentPage * pageSize - 1;
                if (endData > data.length) {
                    endData = data.length;
                }
                $('.tr-item').remove(); //移除列表显示的数据
                for (let i = startData; i < endData; i++) { //添加列表显示的数据
                    $('#pageShow').append('<tr class="tr-item">' +
                        '<td>' + data[i].name + '</td>' +
                        '<td>' + data[i].age + '</td>' +
                        '<td>' + data[i].phone + '</td>' +
                        '</tr>')
                }
            }
            //初始化
            $('.page-item').eq(0).addClass('active');
            pageination(1);
            //对每个页数的点击事件的绑定
            $('.page-item').on('click', function() {
                    let index = $(this).index(); //获取点击的页数
                    $(this).addClass('active').siblings().removeClass('active');
                    pageination(index);
                })
                //向前按钮事件绑定
            $('.prePage').click(function() {
                    $('.page-item').find(function() {
                        let index = $('.active').index() - 1;
                        if (index < 1) {
                            index = 1;
                        }
                        $('.page-item').eq(index - 1).addClass('active').siblings().removeClass('active');
                        pageination(index);
                    })
                })
                //向后按钮事件绑定
            $('.nextPage').click(function() {
                $('.page-item').find(function() {
                    let index = $('.active').index() + 1;
                    if (index > totalPage) {
                        index = totalPage;
                    }
                    $('.page-item').eq(index - 1).addClass('active').siblings().removeClass('active');
                    pageination(index);
                })
            })
        })
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>

</html>
js

 

思路：

利用事件绑定来使页面显示我们要显示的

posted @ 2019-11-05 14:58  逝zxq  阅读(844)  评论(0)  编辑  收藏  举报