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具体页面操做
		}
	});
});
相关文章
相关标签/搜索