自定义jQuery分页导航插件

最新推荐文章于 2023-05-22 08:44:15 发布

VIP文章 LuckyRyan-2014

最新推荐文章于 2023-05-22 08:44:15 发布

阅读量587

点赞数 1

分类专栏： Web前端 JAVA 综合文章标签： jquery html javascript 分页插件

本文链接：https://blog.csdn.net/u012429375/article/details/51534350

版权

使用jQuery实现自定义的分页导航插件，效果如下图：

<span style="font-size:18px;"><!doctype html>
<html>
<head>
<title>MyWeb UI Examples</title>
    <meta charset="utf-8">
	<style type="text/css" rel="stylesheet">
	.page-nav {
	 	height: 45px;
	 	background-color: #efefef;
	 	border: 1px solid #ccc;
	 	margin-top: 50px;
	}
	</style>
</head>
  
<body>

	<!-- 分页导航区 -->
	<div id="page-nav" class="page-nav"></div>

	<link rel="stylesheet" type="text/css" href="css/ryan-pagination.css">
	<script type="text/javascript" src="scripts/jquery-1.12.3.js"></script>
	<script type="text/javascript" src="scripts/ryan-pagination-1.0.0.js"></script>
	<script type="text/javascript"> 
	$(function(){
		var settings = {
				totalSize: 143  // 记录总条数
			};
		$("div#page-nav").ryanPagination(settings);
	}); 
</script> 
</body>
</html> </span>

$.fn.ryanPagination = function(settings){
	var opts = $.extend({}, {
		showPageNum: 9,
		pageSize: 10,      // 默认每页展示10条记录
		showTitle: false   // 是否展示导航按钮的title信息
	}, settings);
	// 计算数据总页数
	opts.totalPage = Math.ceil(settings.totalSize / opts.pageSize);

	var beginPage = opts.totalPage > 0 ? 1 : 0,
		navObj = this;

	$(navObj).empty().append(
		$("<div/>").addClass("page-nav-left").attr("id", "page-nav-left")
	).append(
		$("<div/>").addClass("page-nav-right").attr("id", "page-nav-right")
	);

	var initPageRecord = function(beginPage, totalPage, s

最低0.47元/天解锁文章

LuckyRyan-2014

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义jQuery分页导航插件

使用jQuery实现自定义的分页导航插件，效果如下图：MyWeb UI Examples .page-nav { height: 45px; background-color: #efefef; border: 1px solid #ccc; margin-top: 50px; } $(function(
复制链接

扫一扫