因爲在給學生上課過程用須要用到分頁操做,發現一個比較好用的分頁插件,效果以下javascript
插件 下載地址 :https://github.com/lyonlai/bootstrap-paginatorcss
使用方法:html
一、首先要引入必要的css和js文件。java
<link type="text/css" rel="stylesheet" href="bootstrap.css"> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript" src="bootstrap-paginator.js"></script>
二、寫一個divjquery
<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>
三、編寫jsgit
$(function(){ var currentPage = ${indexData.page.currentPage}; var totalPage = ${indexData.page.totalPage}; $('#pageLimit').bootstrapPaginator({ currentPage : currentPage, totalPages : totalPage, size : "normal", bootstrapMajorVersion : 3, alignment : "right", numberOfPages : 5, itemTexts : function(type, page, current) { switch (type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "尾頁"; case "page": return page; } },onPageClicked: function (event, originalEvent, type, page) { //TODO具體頁面操做 } }); });