利用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>
思路：
利用事件绑定来使页面显示我们要显示的
巴特西

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

最新文章

热门文章
