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

效果圖（前台顯示新聞列表）

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

程式碼實作

<code>pages.js
</code>

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

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

    <span>//如果是第一页</span><span>if</span>(curPage==<span>1</span>){
        pageStr +=<span>"<span>首页</span> <span>上一页</span> "</span>;
    }<span>else</span>{
        pageStr +=<span>"<span><a rel="1">首页</a> </span><span><a rel='"</span>+(curPage-<span>1</span>)+<span>"'>上一页</a> </span>"</span>;
    }

    <span>//如果是最后页</span><span>if</span>(curPage>=totalPage){
        pageStr +=<span>"<span>下一页</span> <span>尾页</span> "</span>;
    }<span>else</span>{
        pageStr +=<span>"<span><a rel='"</span>+(<span>parseInt</span>(curPage)+<span>1</span>)+<span>"'>下一页</a> </span><span><a rel='"</span>+totalPage+<span>"'>尾页</a> </span>"</span>;
    }

    $(<span>"#pagecount"</span>).html(pageStr);
}

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

<code>page.php
</code>

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

<span>$page</span>=intval(<span>$_POST</span>[<span>'pageNum'</span>]);

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

<code>news_manager.php
</code>

  注意要包含進js檔案。

<code>...
            <divid>"list"<span><span>class</span>="<span>list</span>">               
                ul</span>><span>ul</span>>
            <span>div</span>>
            divid="<span>pagecount</span>"><span>div</span>>
...</divid></code>

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

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