基于php的pc端分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .page_active{
            background-color: #f86000!important;
            color: #fff!important;
        }
    </style>
</head>
<body>
<div>
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li><a name="1">首页</a></li>
        </ul>
        <ul class="pagination page-content">

        </ul>

        <ul  class="pagination page-footer">

        </ul>
        <ul class="pagination page-number">
            <li>
                <input class="page-enter" style="  border: 1px solid #ddd;;width: 30%;float: left;float: left;padding: 6px 12px;" type="text" value="11">
            </li>
        </ul>
    </nav>

</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script src="bootstrap/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
    $('.pagination').delegate('a','click',function () {
        var number=this.name;
        ajaxFun(1,number);
    });

    $(".page-number .page-enter").keypress(function(e){
        var eCode = e.keyCode;
        if (eCode == 13){
//            console.log(e.target);
            var number=$(e.target).val();
            console.log(number);
            ajaxFun(1,number);
            //自己写判断函数
        }
    });
    function ajaxFun(flag,number){
        $.ajax({
//
//            headers: {
//                Accept: "application/json; charset=utf-8"
//            },
            url:"../page/php/page.php",
            data:{page:number},
            type: "POST",
            success: function (data) {
                var html='';
                var tableJson=JSON.parse(data);
                var totalNumber = Number(tableJson.total);
                if(number>totalNumber){
                    alert('已经超过最大页码,最大页码为'+totalNumber);
                    return;
                }else{
                    pageFun(flag,tableJson);
                }
            }
        });
    }
    //初始的页码
    function initFun(){
        ajaxFun(0,1);
    }
    initFun();
    function pageFun(flag,tableJson) {
        var pageNumber = Number(tableJson.current);
        var totalNumber = Number(tableJson.total);
        if(pageNumber ==2 ){
            if(totalNumber>5){
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    '            <li><a  name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+3)+'">'+(pageNumber+3)+'</a></li>\n' +
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }else{
                var htmls="";
                for(var i=1;i<totalNumber-pageNumber+1;i++){
                    htmls= htmls +'            <li><a  name="'+(pageNumber+i)+'">'+(pageNumber+i)+'</a></li>\n';
                }
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    '            <li><a  name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    htmls+
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }

        }else if(totalNumber - pageNumber ==2){
            html='            <li>\n' +
                '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                '                    <span aria-hidden="true">&laquo;</span>\n' +
                '                </a>\n' +
                '            </li>\n' +
                '            <li><a  name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
                '            <li><a  name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
                '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                '            <li><a  name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
                '            <li><a  name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
                '            <li>\n' +
                '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                '                    <span aria-hidden="true">&raquo;</span>\n' +
                '                </a>\n' +
                '            </li>';

        }else if(pageNumber ==1){
            if(flag==0){
                var html='';
                html='<li><a name="'+totalNumber+'">尾页</a></li>';
                $('.page-footer').html(html);
            }
            if(totalNumber>5){
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+3)+'">'+(pageNumber+3)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+4)+'">'+(pageNumber+4)+'</a></li>\n' +
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }else{
                var htmls="";
                for(var i=1;i<totalNumber-pageNumber+1;i++){
                    htmls= htmls +'            <li><a  name="'+(pageNumber+i)+'">'+(pageNumber+i)+'</a></li>\n';
                }
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    htmls+
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }
        }else if(totalNumber - pageNumber ==1){
            if(totalNumber>5){
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    '            <li><a  name="'+(pageNumber-3)+'">'+(pageNumber-3)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
                    '            <li><a  class="page_active"  name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }else{
                var htmls="";
                console.log('zzzz');
                for(var i=totalNumber-2;i>0;i--){
                    htmls= htmls +'            <li><a  name="'+(pageNumber-i)+'">'+(pageNumber-i)+'</a></li>\n';
                }
                console.log(htmls);
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    htmls+
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }
        }else if(totalNumber - pageNumber == 0){
            if(totalNumber>5){
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    '            <li><a  name="'+(pageNumber-4)+'">'+(pageNumber-4)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber-2)+'">'+(pageNumber-3)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
                    '            <li><a  name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }else{
                var htmls="";
                for(var i=totalNumber-1;i>0;i--){
                    htmls= htmls +'            <li><a  name="'+(pageNumber-i)+'">'+(pageNumber-i)+'</a></li>\n';
                }
                html='            <li>\n' +
                    '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                    '                    <span aria-hidden="true">&laquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>\n' +
                    htmls+
                    '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                    '            <li>\n' +
                    '                <a  aria-label="Next"  name="'+(pageNumber)+'">\n' +
                    '                    <span aria-hidden="true">&raquo;</span>\n' +
                    '                </a>\n' +
                    '            </li>';
            }
        }else{
            html='            <li>\n' +
                '                <a  aria-label="Previous" name="'+(pageNumber-1)+'">\n' +
                '                    <span aria-hidden="true">&laquo;</span>\n' +
                '                </a>\n' +
                '            </li>\n' +
                '            <li><a  name="'+(pageNumber-2)+'">'+(pageNumber-2)+'</a></li>\n' +
                '            <li><a  name="'+(pageNumber-1)+'">'+(pageNumber-1)+'</a></li>\n' +
                '            <li><a  class="page_active" name="'+(pageNumber)+'">'+(pageNumber)+'</a></li>\n' +
                '            <li><a  name="'+(pageNumber+1)+'">'+(pageNumber+1)+'</a></li>\n' +
                '            <li><a  name="'+(pageNumber+2)+'">'+(pageNumber+2)+'</a></li>\n' +
                '            <li>\n' +
                '                <a  aria-label="Next"  name="'+(pageNumber+1)+'">\n' +
                '                    <span aria-hidden="true">&raquo;</span>\n' +
                '                </a>\n' +
                '            </li>';
        }
        console.log(html);
        $('.page-content').html('');
        $('.page-content').html(html);
    }

</script>
</body>
</html>
 
<?php
/**
 * Created by PhpStorm.
 * User: 74406
 * Date: 2017/12/27
 * Time: 19:41
 */
//header("Content-Type:application/json;charset=utf-8");
$current=$_POST['page'];
//echo $current;
$page=$current;

$pageLength=3;
$con = new mysqli('127.0.0.1', 'root', '', 'test');

if($con){
    $result=mysqli_query($con,"SELECT * FROM teacher");

    $footLength=3;

    $count=mysqli_num_rows($result);
    $pageNum=ceil ($count/$footLength);
    $begin=($page-1)*3;
    $sql="SELECT * FROM teacher limit $begin,$pageLength";
    $result=mysqli_query($con,$sql);

    $result=mysqli_fetch_all($result,MYSQLI_ASSOC);
//    var_dump($result);
    $array=[];
    $array['total']=$pageNum;
    $array['current']=$current;
    $array['data']=$result;
    echo json_encode($array);
// 释放结果集

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值