jQuery帶分頁搜索跳轉功能特效代碼



17 66 23



特效描述:jQuery 帶分頁搜索 跳轉功能,jQuery帶分頁搜索跳轉功能特效代碼

代碼結構

1. 引入JS

<script src="js/jquery-1.8.1.js"></script>

2. HTML代碼

<div style="width: 100%;">
	<div class="pageListTab">
		<div class="pageLt" id="pageLt">
			<span>條數顯示</span>
			<a href="javascript:;">10</a>
			<a href="javascript:;">20</a>
			<a href="javascript:;">30</a>
			<a href="javascript:;">40</a>
		</div>
		<div class="pageRt">
			<span>共<em id="count">0</em>條</span>
			<a href="javascript:;" class="down_page"><</a>
			<a href="javascript:;" class="active" id="nowPage">1</a>
			<a href="javascript:;" class="up_page">></a>
			<input type="text" id="pageNum" name="pageNum">
			<span id="allPage">/1頁</span>
			<a href="javascript:;" class="jump_page">跳轉</a>
		</div>
	</div>
</div>
<script>
	var page = 1;
	var limit = 10;
	var sumPage = 6;
	var size = 28;
	$(function(){
		page = parseInt(page);
		limit = parseInt(limit);  //防止頁碼出現字符串,轉換類型
		loadClass();
		setPageMsg();
		initPage();
		$("#pageLt").find("a").unbind("click").click(function(){
			$("#pageLt").find("a").removeClass("active");
			$(this).addClass("active");
			limit = parseInt($(this).text());
			// 分頁執行的fun
		});
	});
	function loadClass(){
		if(limit == 10){
			$("#pageLt").find("a").removeClass("active");
			$("#pageLt").find("a").eq(0).addClass("active");
		}else if(limit == 20){
			$("#pageLt").find("a").removeClass("active");
			$("#pageLt").find("a").eq(1).addClass("active");
		}else if(limit == 30){
			$("#pageLt").find("a").removeClass("active");
			$("#pageLt").find("a").eq(2).addClass("active");
		}else if(limit == 40){
			$("#pageLt").find("a").removeClass("active");
			$("#pageLt").find("a").eq(3).addClass("active");
		}
	}
	/** 初始化分頁控件 **/
	function initPage(){
		$(".down_page").click(function(){  //上一頁
			if(page != 1){
				page = page - 1;
				$("#nowPage").text(page);
				// 分頁執行的fun
			}else{
				alert("已經是第一頁了","warning");
			}
		});
		$(".up_page").click(function(){   //下一頁
			if(page < parseInt(sumPage)){
				page = page + 1;
				$("#nowPage").text(page);
				// 分頁執行的fun
			}else{
				alert("已經是最后一頁了","warning");
			}
		});
		$(".jump_page").click(function(){
			var pageNum = $("#pageNum").val();
			if(parseInt(pageNum) <= parseInt(sumPage)){
				page = parseInt(pageNum);
				$("#nowPage").text(page);
				// 分頁執行的fun
			}else{
				alert("頁數不能大于總頁數","warning");
			}
		});
	}
	function setPageMsg(){
		$("#count").text(size);
		$("#nowPage").text(page);
		$("#allPage").text(""+sumPage+"頁");
	} 
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動星星打分 切換按鈕 表單 表單美化 表單插件 表單美化插件 其他 文本框 text文本框 跳轉 分頁 翻頁 分頁插件
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

林肯娱乐怎么赚钱