php---mysql+ajax 无序列表（ul li）分页实现

效果图（前台显示新闻列表）

注：以下的代码中的css实现没有包括，可以自己去实现。通过ajax的回调函数success等，获取数据库中的数据，然后再通过js将数据输出到php中，从而动态显示数据。以作备忘。

代码实现

白果AI论文

论文AI生成学术工具，真实文献，免费不限次生成论文大纲 10 秒生成逻辑框架，10 分钟产出初稿，智能适配 80+学科。支持嵌入图表公式与合规文献引用

下载

pages.js

var curPage =1;//当前页码var total,pageSize,totalPage;
//获取数据functiongetData(page){
    $.ajax({
        type:'POST',
        url:'page.php',
        data:{'pageNum':page-1},
        dataType:'json',
        beforeSend:function(){
            $("#list ul").append("
loading...
");
        },
        success:function(json){
            $("#list ul").empty();
            total = json.total;//总记录数
            pageSize = json.pageSize;//每页显示条数
            curPage = page;//当前页
            totalPage = json.totalPage;//总页数var li ="";
            var list = json.list;
            $.each(list,function(index,array){//遍历json数据列if(array['title'].length >28){
                    var title_sub = array['title'].substring(0,20);// 获取子字符串。
                }
                elsevar title_sub = array['title'];
                if(0==index &&1==curPage)li +="
+ array['content']+"\"style=\"color:red;font-weight:900;\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"
"+array['date']+"
";
                elseif(1==index &&1==curPage)li +="
+ array['content']+"\"style=\"color:Darkorange;font-weight:700;\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"
"+array['date']+"
";
                elseif(2==index &&1==curPage)li +="
+ array['content']+"\"style=\"color:Greenyellow;font-weight:500;;\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"
"+array['date']+"
";
                else li +="
+ array['content']+"\"target=\"myIframe\" title=\""+array['title']+"\">"+title_sub+"
"+array['date']+"
";
            });
            $("#list ul").append(li);
        },
        complete:function(){//生成分页条
            getPageBar();
        },
        error:function(){
            alert("数据加载失败");
        }
    });
}

//获取分页条functiongetPageBar(){//页码大于最大页数if(curPage>totalPage) curPage=totalPage;
    //页码小于1if(curPage<1) curPage=1;
    pageStr ="共"+total+"条"+curPage+"/"+totalPage+"";

    //如果是第一页if(curPage==1){
        pageStr +="首页 上一页 ";
    }else{
        pageStr +="首页 上一页 ";
    }

    //如果是最后页if(curPage>=totalPage){
        pageStr +="下一页 尾页 ";
    }else{
        pageStr +="下一页 尾页 ";
    }

    $("#pagecount").html(pageStr);
}

$(function(){
    getData(1);
    $("#pagecount span a").live('click',function(){var rel = $(this).attr("rel");
        if(rel){
            getData(rel);
        }
    });
});

page.php

/*数据库连接文件，这个只需连接即可*/include_once('../connect/connect.php');

$page=intval($_POST['pageNum']);

$result=mysql_query("select id from news");
$total=mysql_num_rows($result);//总记录数$pageSize=6;//每页显示数$totalPage=ceil($total/$pageSize);//总页数$startPage=$page*$pageSize;
$arr['total']=$total;
$arr['pageSize']=$pageSize;
$arr['totalPage']=$totalPage;
$query=mysql_query("select id,title,content,date from news order by id  desc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){
     $arr['list'][]=array(
        'id'=>$row['id'],
        'title'=>$row['title'],
        'content'=>$row['content'],
        'date'=>date("Y-m-d",$row['date'])
     );
}
echojson_encode($arr);
?>

news_manager.php

  注意要包含进js文件。

...
            "list"class="list">               
                <ul>ul>
            div>
            <divid="pagecount">div>
...