jquery.pager应用

最新推荐文章于 2021-02-26 23:42:13 发布

全栈编程网

最新推荐文章于 2021-02-26 23:42:13 发布

阅读量417

点赞数

本文链接：https://blog.csdn.net/ruanhao1203/article/details/43021117

版权

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${ctx }resource/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="${ctx }resource/scripts/jquery.pager.js"></script>
<script type="text/javascript" language="javascript">
         //pagenumber 为当前页码
         //pagecount  总页数
         //PageClick 为回调函数
         //pageclickednumber 为点击页码
        $(document).ready(function() {
            $("#pager").pager({ pagenumber: 1, pagecount: 10, buttonClickCallback: PageClick });
            PageClick(1);
        });

        PageClick = function(pageclickednumber) {
            $("#pager").pager({ pagenumber: pageclickednumber, pagecount: 10, buttonClickCallback: PageClick });
            $("#result").html("Clicked Page " + pageclickednumber);
        }
       
    </script>
<style type="text/css">
	@charset "utf-8";
	/* CSS Document */
	
	body, a, div, img, table, td, th, tr, ul, li, dl, dt, dd, h1, h2, h3, p {margin: 0; padding: 0; border: 0 none; list-style:none; }
	body{font-size:12px; line-height:22px; font-family:"宋体",Arial,Helvetica,sans-serif; color: #666; width:100%; height:100%; position:relative;}
	html{width:100%; height:100%; overflow:hidden;}
	
	/* jquery.pager样式 */
	.pager{padding:3px 10px 1px 2px ;text-align:right; overflow:hidden;background:#ededed;height:28px;}
	.pages span,.pages a{display:inline-block;padding:1px 8px;margin:0 2px;margin-top:2px;border:1px solid #ccc;background:#fff;color:#666;text-decoration:none;vertical-align:middle;line-height:19px;}
	.pages a:hover{background-color:#fff;text-decoration:none;color:#2a5aa1;border:1px solid #2a5aa1;}
	.pages a.pgEmpty{border:1px solid #ccc;background:#ededed;color:#999;cursor:default;}
	.pages span{background-color:#63a0d2;font-weight:bold;border:1px solid #2a5aa1;color:#fff}
	.pages input.text{margin-left:5px; width:26px;height:20px;padding:0;border:1px solid #ccc;text-align:center;line-height:20px;}
	.pages input.button{margin-left:1px;width:40px;vertical-align:middle;}
	
	
</style>
</head>
<body>
	<div style="width:100%;height:50%;border:1px solid #f00;" id="result">
		
	</div>
	<div id="pager" ></div>
</body>
</html>

效果：

全栈编程网

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.pager应用

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>Insert title here //pagenumber 为当前页码 //pagecount 为显示页数 //PageClick 为回调函数
复制链接

扫一扫