Bootstrap Paginator 分頁插件的使用

因爲在給學生上課過程用須要用到分頁操做,發現一個比較好用的分頁插件,效果以下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具體頁面操做
		}
	});
});
相關文章
相關標籤/搜索