官网:http://jqpaginator.keenwon.com/
github:https://github.com/keenwon/jqPaginator
示例:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> ???<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> ???<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/> ???????<script type="text/javascript" src="./Content/jQuery/jquery-3.2.1.min.js"></script> ???<script type="text/javascript" src="./Content/pagination/jqPaginator.js"></script></head><body> ???<input id="btn" ?value="改变" type="button"> ???????<p id="p1"></p> ???<ul class="pagination" id="pagination1"></ul> ???<p id="p2"></p> ???<ul class="pagination" id="pagination2"></ul> ???<script> ???$.jqPaginator(‘#pagination1‘, { ???????totalPages: 100, ???????visiblePages: 10, ???????currentPage: 3, ???????????????????first: ‘<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>‘, ???????????prev: ‘<li class="prev"><a href="javascript:void(0);"><i class="arrow arrow2"><\/i>上一页<\/a><\/li>‘, ???????????next: ‘<li class="next"><a href="javascript:void(0);">下一页<i class="arrow arrow3"><\/i><\/a><\/li>‘, ???????????last: ‘<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>‘, ???????????page: ‘<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>‘, ???????onPageChange: function (num, type) { ???????????$(‘#p1‘).text(type + ‘:‘ + num); ???????} ???}); ???$.jqPaginator(‘#pagination2‘, { ???????totalPages: 100, ???????visiblePages: 10, ???????currentPage: 3, ???????prev: ‘<li class="prev"><a href="javascript:;">Previous</a></li>‘, ???????next: ‘<li class="next"><a href="javascript:;">Next</a></li>‘, ???????page: ‘<li class="page"><a href="javascript:;">{{page}}</a></li>‘, ???????onPageChange: function (num, type) { ???????????$(‘#p2‘).text(type + ‘:‘ + num); ???????} ???}); ??????$("#btn").on("click", function () { ???????????$(‘#pagination1‘).jqPaginator(‘option‘, { ???????????????totalPages: 10, ???????????????currentPage: 1 ???????????}); ???????}); ???</script> </body></html>
jQuery开源组件--jqPaginator分页组件
原文地址:http://www.cnblogs.com/bmbh/p/7742540.html