?? ??? ??? ?? ??? ? ??? ??? ??? ? ? ???? ???? ???? ?? ?? ? ? ????. ?? ?? : 1. ??? ??? ????. 2. ??? ??? ???? ??? ??????. 3. ??? ??? ?????. 4. ?? ?? ??; 5. ??? ??? ???? ??????. ?? ?? : html

<li> 1 <li>

?? ??? ??? ??? ???? ??

?? ??? ??? ?? ??? ?? ??? ??? ??? ??? ???? ???? ?????. ? ??? ??? ????? ???? ???? ?? ?? ? ??? ???? ??? ??? ?????.

?? ?? :

?? ??? ???? ????? ?? ??? ?????.

<li> ??? ?? ??? : <ul></ul> ??? ???? ???? ?? ??? ????. <li> ??? ?? ?? : <ul></ul> ??? <li> ??? ???? ? ??? ??? ?????. <li> ??? ?? ?? : ??? ??? ?? ? <li> ??? <a></a> ??? ??????. <li> ??? ??? ?????? : <a></a> ??? data-page ??? ???? ??? ??? ??????. <li> ?? ??? ?? ??? ?? : active ???? ???? ?? ?? ??? ??? ??????. <li> Pagination ??? ??? ?? : ???? Pagination ??? ?? ? ? click ??? ???? ???? ???? ?????.

?:

 <code class="html"><ul class="pagination"> <li class="page-item"><a class="page-link" data-page="1">1</a></li> <li class="page-item"><a class="page-link" data-page="2">2</a></li> <li class="page-item"><a class="page-link" data-page="3">3</a></li> <li class="page-item active"><a class="page-link" data-page="4">4</a></li> <li class="page-item"><a class="page-link" data-page="5">5</a></li> </ul></code>

Pagination ??? ??? :

??? ???? ????? ?? JavaScript ??? ??????.

 <code class="javascript">$(".pagination").on("click", ".page-link", function(e) { e.preventDefault(); var page = $(this).data("page"); // 在這里處理分頁邏輯});</code>

?? ?? :

?? ??? ??? ?? ??? ??? ?? ?? ??? ?????.

<li> ??? ?? ( disabled ???) <li> ??? ?? ( justify-content-* ???) <li> ??? ?? ( pagination-* ???)

? ??? ?? ??? ??? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!