jQuery开源组件--jqPaginator分页组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery开源组件--jqPaginator分页组件相关的知识，希望对你有一定的参考价值。
官网：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分页组件的主要内容，如果未能解决你的问题，请参考以下文章
jqPaginator分页（ajax用法和form表单提交用法）