搜尋
首頁後端開發php教程php---mysql+ajax 無序列表（ul li）分頁實現

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Jul 29, 2016 am 09:15 AM
arraygtltspantitle

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

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教程有興趣的朋友有所幫助。

陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
相關文章
簡單地說明PHP會話的概念。簡單地說明PHP會話的概念。Apr 26, 2025 am 12:09 AM

phpsessionstrackuserdataacrossmultiplepagerequestsusingauniqueIdStoredInAcookie.here'showtomanageThemeffectionaly：1）startAsessionWithSessionWwithSession_start（）和stordoredAtain $ _session.2）

您如何循環中存儲在PHP會話中的所有值？您如何循環中存儲在PHP會話中的所有值？Apr 26, 2025 am 12:06 AM

在PHP中，遍歷會話數據可以通過以下步驟實現：1.使用session_start()啟動會話。 2.通過foreach循環遍歷$_SESSION數組中的所有鍵值對。 3.處理複雜數據結構時，使用is_array()或is_object()函數，並用print_r()輸出詳細信息。 4.優化遍歷時，可採用分頁處理，避免一次性處理大量數據。這將幫助你在實際項目中更有效地管理和使用PHP會話數據。

說明如何使用會話進行用戶身份驗證。說明如何使用會話進行用戶身份驗證。Apr 26, 2025 am 12:04 AM

會話通過服務器端的狀態管理機制實現用戶認證。 1)會話創建並生成唯一ID，2)ID通過cookies傳遞，3)服務器存儲並通過ID訪問會話數據，4)實現用戶認證和狀態管理，提升應用安全性和用戶體驗。

舉一個如何在PHP會話中存儲用戶名的示例。舉一個如何在PHP會話中存儲用戶名的示例。Apr 26, 2025 am 12:03 AM

Tostoreauser'snameinaPHPsession,startthesessionwithsession_start(),thenassignthenameto$_SESSION['username'].1)Usesession_start()toinitializethesession.2)Assigntheuser'snameto$_SESSION['username'].Thisallowsyoutoaccessthenameacrossmultiplepages,enhanc

哪些常見問題會導致PHP會話失敗？哪些常見問題會導致PHP會話失敗？Apr 25, 2025 am 12:16 AM

PHPSession失效的原因包括配置錯誤、Cookie問題和Session過期。 1.配置錯誤：檢查並設置正確的session.save_path。 2.Cookie問題：確保Cookie設置正確。 3.Session過期：調整session.gc_maxlifetime值以延長會話時間。

您如何在PHP中調試與會話相關的問題？您如何在PHP中調試與會話相關的問題？Apr 25, 2025 am 12:12 AM

在PHP中調試會話問題的方法包括：1.檢查會話是否正確啟動；2.驗證會話ID的傳遞；3.檢查會話數據的存儲和讀取；4.查看服務器配置。通過輸出會話ID和數據、查看會話文件內容等方法，可以有效診斷和解決會話相關的問題。

如果session_start（）被多次調用會發生什麼？如果session_start（）被多次調用會發生什麼？Apr 25, 2025 am 12:06 AM

多次調用session_start()會導致警告信息和可能的數據覆蓋。 1)PHP會發出警告，提示session已啟動。 2)可能導致session數據意外覆蓋。 3)使用session_status()檢查session狀態，避免重複調用。

您如何在PHP中配置會話壽命？您如何在PHP中配置會話壽命？Apr 25, 2025 am 12:05 AM

在PHP中配置會話生命週期可以通過設置session.gc_maxlifetime和session.cookie_lifetime來實現。 1)session.gc_maxlifetime控制服務器端會話數據的存活時間，2)session.cookie_lifetime控制客戶端cookie的生命週期，設置為0時cookie在瀏覽器關閉時過期。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

刺客信條陰影：貝殼謎語解決方案
4 週前ByDDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前ByDDD
在哪裡可以找到原子中的起重機控制鑰匙卡
4 週前ByDDD
<🎜>：死鐵路 - 如何完成所有挑戰
1 個月前ByDDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前ByDDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）專業的PHP整合開發工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中，你可以繼續在那裡關注我們。 MinGW：GNU編譯器集合（GCC）的本機Windows移植版本，可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔；包括對MSVC執行時間的擴展，以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7724
15
Java教學
1643
14
CakePHP 教程
1396
52
Laravel 教程
1290
25
PHP教程
1233
29
顯示更多