php---mysql+ajax 無序列表（ul li）分頁實現

（前台顯示新聞列表）

註：以下的代碼中的css實現沒有包括，可以自己去實現。通過ajax的回呼函數success等，擷取資料庫中的資料，然後再通過js將資料輸出到php中，從而動態顯示資料。以作備忘。

代碼實現

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 +="首頁 +(curPage-1)+"'>上一頁 ";    }    //如果是最後頁if(curPage>=totalPage){        pageStr +="下一頁 尾頁 ";    }else{        pageStr +="+(parseInt(curPage)+1)+"'>下一頁 +totalPage+"'>尾頁 ";    }    $("#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>...

著作權聲明：本文為博主[原創]文章，未經博主允許可以轉載，註明部落格出處：[http://blog.csdn.net/FreeApe]

以上就介紹了php---mysql+ajax 無序列表（ul li）分頁實現，包括了方面的內容，希望對PHP教程有興趣的朋友有所協助。

