bootstrap-paginator

邵骏喆
2023-12-01

依赖包

	<link href="resources/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<script src="resources/js/jquery-1.10.2.min.js" type="text/javascript"></script>
	<script src="resources/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="resources/js/bootstrap-paginator.js" type="text/javascript"></script>

html结构

	<div class="container">
		<div style="margin-top: 100px;">
			<ul id="page"></ul>
		</div>
	</div>

js初始化

	   $(function () {
       		var currentPage = 1;	//当前页
       		var totalPages = 25; 	//总页数
       		$("#page").bootstrapPaginator({
           		bootstrapMajorVersion:3, 	//对应的bootstrap版本
          		currentPage: currentPage, 		//当前页数
           		numberOfPages: 10, 		//每次显示页数
          		totalPages:totalPages, 		//总页数
           		shouldShowPage:true,	//是否显示该按钮
           		useBootstrapTooltip:true,
           			//点击事件
           		onPageClicked: function (event, originalEvent, type, page) {
               

           }
       });

    });

插件原网页

 类似资料: