jQuery+bootstrap实现有省略号的数据分页

istj型人格 • 2022-6-12 • html-js-css • 阅读 60

1、前言

在前端通过ajax请求数据后，可以通过bootstrap实现分页。由于bootstrap只提供分页的按钮的样式。数据分页我们需要实现页码跳转，上一页下一页，数据过多显示省略号，点击省略号能快速切换到其他页的数据。

2、实现过程

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
head>

<body>
    <nav aria-label="Page navigation" style="margin-top: 50px;">
        <input type="text" name="pagenumber" value="1" hidden />
        <ul class="pagination">ul>
    nav>
body>
<script src="https://cdn.staticfile.org/jquery/1.10.0/jquery.min.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
    $(document).ready(function () {
        let total = 200; // 数据总条数
        let PageIndex = 1;// 当前页
        let PageSize = 10; //一页显示10条
        let pageHtml = $('.pagination'); // 分页栏
        let totalPage = Math.ceil(total / PageSize); // 获取到总页数
        function setPages() {
            let pageBtnPrev = "«";
            let pageBtnNext = "»";
            let pageTips = "" + PageIndex + " " + "-" + " " + totalPage + " " + "of" + " " + total + " " + "items" + "

 ";
            pageHtml.append(pageBtnPrev); // 添加左按钮
            // 第一页
            let firstPage = $("1 ");
            // 最后一页
            let lastPage = $(" + totalPage + "'>" + totalPage + "");
            // 左省略号
            let leftOmitPage = $("...");
            // 右省略号
            let rightOmitPage = $("...");
            // 左省略号图标
            let leftOmitIcon = $("");
            // 右省略号图标
            let rightOmitIcon = $("");

            // 总页数小于等于10页全部显示
            if (totalPage <= 10) {
                for (let i = 1; i <= totalPage; i++) {
                    pageHtml.append($(" + i + ">" + i + " "));
                }

            } else if (PageIndex <= 8) {  //总页数大于10且当前页远离总页数
                for (let i = 1; i <= 9; i++) {
                    pageHtml.append($(" + i + ">" + i + " "));
                }
                pageHtml.append(rightOmitPage);
                pageHtml.append(lastPage);
                //总页数大于10且当前页接近总页数
            } else if (PageIndex > totalPage - 7) {
                pageHtml.append(firstPage);
                pageHtml.append(leftOmitPage);
                for (let i = totalPage - 8; i <= totalPage; i++) {
                    pageHtml.append($(" + i + ">" + i + " "));
                }
                //除开上面两个情况 当前页在中间
            } else {
                pageHtml.append(firstPage);
                pageHtml.append(leftOmitPage);
                for (let i = PageIndex - 3; i <= PageIndex + 3; i++) {
                    pageHtml.append($(" + i + ">" + i + " "));
                }
                pageHtml.append(rightOmitPage);
                pageHtml.append(lastPage);
            }

            $(".pagination li[pagenumber='" + PageIndex + "']").addClass('active');
            pageHtml.append(pageBtnNext); // 添加右按钮
            pageHtml.append(pageTips); // 添加右下角items提示栏

            /* 点击页码按钮进行翻页 */
            $(".pagination li[pagenumber]").on('click', function () { // 页数跳转
                PageIndex = Number($(this).text()); // 当前页
                $('input[name=pagenumber]').attr('value', PageIndex); // 当前第几页
                $(this).siblings('li').removeClass('active');
                $(this).addClass('active');
                pageHtml.empty();
                setPages();
            })

            /* 点击按钮进行翻页 */
            $(".btnPrev").on('click', function () { // 向左翻页
                if (PageIndex > 1) {
                    PageIndex--;
                    pageHtml.empty();
                    setPages();
                }
                $(this).addClass('disabled');
            })
            $(".btnNext").on('click', function () { // 向右翻页
                if (PageIndex < totalPage) {
                    PageIndex++;
                    pageHtml.empty();
                    setPages();
                }
                $(this).addClass('disabled');
            })

            /* 点击左省略号向左翻页 */
            $('#leftOmit').click(function () {
                if (PageIndex > 10) {
                    PageIndex -= 10;
                    pageHtml.empty();
                    setPages();
                }
            })
            /* 点击右省略号向右翻页 */
            $('#rightOmit').click(function () {
                if (PageIndex <= totalPage - 10) {
                    PageIndex += 10;
                    pageHtml.empty();
                    setPages();
                }
            })
            /* 左省略号移入移出 */
            $('#leftOmit').mouseenter(function () {
                $(this).children().html(leftOmitIcon);
            })
            $('#leftOmit').mouseleave(function () {
                $(this).children().html('...');
            })
            /* 右省略号移入移出 */
            $('#rightOmit').mouseenter(function () {
                $(this).children().html(rightOmitIcon);
            })
            $('#rightOmit').mouseleave(function () {
                $(this).children().html('...');
            })
        }

        setPages();
    })
script>


html>