主要代碼:
index.html
- <script type="text/javascript">
- var curPage = 1; //當前頁碼
- var total,pageSize,totalPage;
- //獲取數據
- function getData(page){
- $.ajax({
- type: 'POST',
- url: 'pages.php',
- data: {'pageNum':page-1},
- dataType:'json',
- beforeSend:function(){
- $("#list ul").append("<li id='loading'>loading...</li>");
- },
- 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數據列
- li += "<li><a href='#'>"+array['title']+"</a></li>";
- });
- $("#list ul").append(li);
- },
- complete:function(){ //生成分頁條
- getPageBar();
- },
- error:function(){
- alert("數據加載失敗");
- }
- });
- }
- //獲取分頁條
- function getPageBar(){
- //頁碼大於最大頁數
- if(curPage>totalPage) curPage=totalPage;
- //頁碼小於1
- if(curPage<1) curPage=1;
- pageStr = "<span>共"+total+"條</span><span>"+curPage+"/"+totalPage+"</span>";
- //如果是第一頁
- if(curPage==1){
- pageStr += "<span>首頁</span><span>上一頁</span>";
- }else{
- pageStr += "<span><a href='javascript:void(0)' rel='1'>首頁</a></span><span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一頁</a></span>";
- }
- //如果是最後頁
- if(curPage>=totalPage){
- pageStr += "<span>下一頁</span><span>尾頁</span>";
- }else{
- pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一頁</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾頁</a></span>";
- }
- $("#pagecount").html(pageStr);
- }
- $(function(){
- getData(1);
- $("#pagecount span a").live('click',function(){
- var rel = $(this).attr("rel");
- if(rel){
- getData(rel);
- }
- });
- });
- </script>
- </head>
- <body>
- <h1 class="logo"><a href="http://www.freejs.net" title="freejs首頁"><img src="../../images/logo.png" height="47" width="500" alt="freejs首頁" /></a></h1>
- <div id="main_demo">
- <div align="center"><h2><a href="../../article_biaodan_10.html">jQuery+Ajax+PHP+Mysql實現分頁顯示數據</a></h2></div>
- <div id="main">
- <div id="list">
- <ul></ul>
- </div>
- <div id="pagecount"></div>
- </div>
pages.php
- <?php
- include_once('conn.php');
- $page = intval($_POST['pageNum']);
- $result = mysql_query("select * from content");
- $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 * from content order by id asc limit $startPage,$pageSize");
- while($row=mysql_fetch_array($query)){
- $arr['list'][] = array(
- 'id' => $row['id'],
- 'title' => $row['name'],
- );
- }
- //print_r($arr);
- echo json_encode($arr);
- ?>