使用bootstrap实现分页，没使用插件分页带省略号

2023-11-07 22:15•css•阅读 2661

效果图如下：




我是后端使用的PHP，并且在JSON数据方面没有采取用对象的方式，而是简单采取特殊符号分割成一个二维数组，从而读取值。
主要思想：前台用Ajax拉取出总页数，分类讨论当前面在第一个、最后两个以及中间的情况，动态绘制分页栏，在后台数据库使用limit限定查询当前页码对应页面的数据量，而不用一次拉取出全部数据。
<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.min.css">
    <link href="../resources/css/app.css" rel="stylesheet"/>
    <link href="index.css" rel="stylesheet">
    <script src="../resources/js/jquery.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
    <script type="text/javascript" src="http://cdn.staticfile.org/twitter-bootstrap/3.0.1/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://cdn.ibootstrap.cn/www.layoutit.com/js/jquery.htmlClean.js"></script>
    <script type="text/javascript" src="http://cdn.ibootstrap.cn/www.layoutit.com/js/builder/v3/scripts.min.js"></script>

    <script>
        function login(){
            window.location="../login/index.html";
        }

        var currentPage=1;
        var pagesize = 10;
        // getpage(currentPage);
        var SumPage;
        function rebuiltPage(currentPage) {
            if(SumPage<=5) return;
            // alert(currentPage);
            if(currentPage==1){
                // alert(currentPage+"Yes");
                $("#pagelist").empty();
                let str = "";
                str = "<li><a οnclick=\'getpage(1)\'>First</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getprevpage()\'>Prev</a></li>";
                $("#pagelist").append(str);

                endpagenum = currentPage + 2;

                for (let i = currentPage; i <= endpagenum; i++) {
                    str = "<li><a οnclick=\'getpage(" + i + ")\'>" + i + "</a></li>";
                    $("#pagelist").append(str);
                }

                str = "<li><a οnclick=\'rebuiltPage(" + (currentPage + 1) + ")\'>" + "…" + "</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getpage(" + SumPage + ")\'>" + SumPage + "</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getnextpage()\'>Next</a></li>";
                $("#pagelist").append(str);

            }
            else if (currentPage<SumPage-1) {
                $("#pagelist").empty();
                let str = "";
                str = "<li><a οnclick=\'getpage(1)\'>First</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getprevpage()\'>Prev</a></li>";
                $("#pagelist").append(str);

                endpagenum = currentPage + 1;

                for (var i = currentPage-1; i <= endpagenum; i++) {
                    str = "<li><a οnclick=\'getpage(" + i + ")\'>" + i + "</a></li>";
                    $("#pagelist").append(str);
                }

                str = "<li><a οnclick=\'rebuiltPage(" + (currentPage + 1) + ")\'>" + "…" + "</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getpage(" + SumPage + ")\'>" + SumPage + "</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getnextpage()\'>Next</a></li>";
                $("#pagelist").append(str);

            }
            else if(currentPage>=SumPage-1){
                $("#pagelist").empty();

                let str = "";
                str = "<li><a οnclick=\'getpage(1)\'>First</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getprevpage()\'>Prev</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'getpage(" + 1 + ")\'>" + 1 + "</a></li>";
                $("#pagelist").append(str);

                str = "<li><a οnclick=\'rebuiltPage(" + (currentPage-1) + ")\'>" + "…" + "</a></li>";
                $("#pagelist").append(str);

                beginPage = SumPage-2;

                for (let i = beginPage; i <= SumPage; i++) {
                    str = "<li><a οnclick=\'getpage(" + i + ")\'>" + i + "</a></li>";
                    $("#pagelist").append(str);
                }

                str = "<li><a οnclick=\'getnextpage()\'>Next</a></li>";
                $("#pagelist").append(str);
            }
        }

        $.ajax({
            type: \'POST\',
            url: \'../../com/index/index.php\',
            data:"action=tzGetCol",
            success: function (data) {
                console.log(data);
                var a = data.split(\'&_cxllovezjh\');
                // alert(a);
                console.log(a);

                var pagenum = a[0];
                SumPage = Math.ceil(pagenum*1.0/pagesize);
                getpage(currentPage);
                // rebuiltPage(currentPage);
            },
            error:function(){
                console.log("ERROR")
            }
        });

        function getpage(pagenum){
            // alert(SumPage);
            if(pagenum>SumPage || pagenum<=0){
                alert("已经到头啦！");
                return;
            }
            currentPage=pagenum;
            rebuiltPage(currentPage);
            $.ajax({
                type: \'POST\',
                url: \'../../com/index/index.php\',
                data:"action=tzShowPage&pagenum="+pagenum,
                success: function (data) {
                    console.log(data);
                    var a = data.split(\'&_cxllovezjh\');
                    console.log(a);
                    var trStr="";
                    $("#tzlist").empty();
                    for (var i = 0; i < a.length-1; i++) {
                        //TODO:判断置顶与否，颜色不同
                        if (JSON.parse(a[i]).top==1) {
                            trStr += \'<li>\';
                            trStr += "<a color:red;margin-left:-5px;width:225px;\' href=\'lookpage.html?mold=tz&\'>" + "【置顶】" + JSON.parse(a[i]).title;
                            trStr += "</a>";
                            trStr += " <span color:red;\'>" + JSON.parse(a[i]).postdate + "</span>";
                            trStr += \'</li>\';
                        }
                        else{
                            trStr += \'<li>\';
                            trStr += "<a href=\'lookpage.html?mold=tz&\'>" + JSON.parse(a[i]).title;
                            trStr += "</a>";
                            trStr += " <span>" + JSON.parse(a[i]).postdate + "</span>";
                            trStr += \'</li>\';
                        }
                    }
                    $("#tzlist").append(trStr);
                    // $("#hint").html("第"+currentPage+"页，共"+SumPage+"页");
                },
                error:function(){
                    console.log("ERROR")
                }
            });
        }

        function getprevpage() {
            getpage(currentPage-1);
        }

        function getnextpage() {
            getpage(currentPage+1);
        }

    </script>
</head>
<body>

<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column box">
            <div >
                <span>新闻通知</span>
            </div>
            <ul class="list" >

            </ul>
        </div>
        <div class="col-md-12 column">
            <span>
                <ul class="pagination" >

                </ul>
                <span class="pagination-lg" ></span>
            </span>
        </div>
    </div>
</div>

</body>
</html>

PHP中的数据处理语句为：

if($action=="tzShowPage"){
    $num = $_POST[\'pagenum\'];
    $begin = ($num-1)*10;
    $db = new MySQL_DB();
    $db->connect();
    $sql = "select * from tz order by top desc,postdate desc limit $begin,10";
    $db->query($sql);
    $db->close();
}

MySQL_DB为自定义的数据库连接类，其query函数原型如下：

    public function query($sql){
        try {
            mysqli_query($this->database_connection, \'set names utf8\');
            $result = mysqli_query($this->database_connection, $sql);
//            echo
            if (mysqli_num_rows($result) > 0) {
                // 输出数据
                while ($row = mysqli_fetch_assoc($result)) {
                    echo json_encode($row,JSON_UNESCAPED_UNICODE).\'&_cxllovezjh\';//转化为json串传输
                }
            }
            else {
//                echo "0 结果";
            }
        }
        catch (Exception $e){
//            echo "异常！连接未建立！";
            return -1;
        }
        return 0;
    }

上一篇 »php如何实现查询分页显示页码？
下一篇 »php如何实现查询分页显示页码？