JQuery MyPagination是一個jQuery插件，它使得實現分頁變得十分簡單。這個插件提供了一個易于使用的API來創建和管理一個高度可定制的分頁控制器。下面是該插件的使用教程。

// 引入jQuery庫
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
// 引入JQuery MyPagination插件
<script src="jquery.mypagination.min.js"></script>

1.基本用法:

// 創建基本分頁
$('selector').mypagination({
totalPage: 10,
currPage: 1,
callback: function (page) {
console.log("當前頁碼: " + page);
}
});

2.更多參數配置:

// 比如配置每頁數量、分頁按鈕數量等等
$('selector').mypagination({
totalPage: 10,
currPage: 1,
pageSize: 10,
showPageNum: 7,
pageInfo: true,
prevBtnHTML: '<i class="fa fa-angle-left"></i>',
nextBtnHTML: '<i class="fa fa-angle-right"></i>',
callback: function (page) {
console.log("當前頁碼: " + page);
}
});

3.自定義樣式:

// 樣式文件示例
.mypagination {
font-size: 14px;
margin-top: 20px;
}
.mypagination ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.mypagination li {
margin: 0 5px;
}
.mypagination li a, .mypagination li span {
display: block;
text-align: center;
padding: 7px 12px;
border: 1px solid #ccc;
color: #333;
background-color: #fff;
border-radius: 3px;
cursor: pointer;
}
.mypagination li.active a, .mypagination li a:hover {
background-color: #333;
color: #fff;
border-color: #ccc;
}

使用上述樣式后，參照以上基本用法便可創建自己的樣式定制化的分頁組件了。