Thứ bảy, ngày 3 tháng 12 năm 2016

Jquery Paging - Phân trang với jQuery Pagination Plugin

Ngày đăng: 30/12/2010, 17:17:57AM | Lượt xem: 7,466
Hot!

Hôm nay mình tìm hiểu được jQuery Pagination Plugin để phân trang dữ liệu thấy khá hay nên viết bài chia sẻ cùng các bạn.

Demo

1. Stylesheet: 

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<style>
	body{
		background: #a7c7dc url(bg.png) repeat-x top left;
		font-family: verdana;padding:0px;margin:0px;
		letter-spacing:2px;
	}
	.content{margin-top:100px;padding:0px;bottom:0px;}
	.demo{width:580px;padding:10px;	margin:10px auto;
		border: 1px solid #fff;	background-color:#f7f7f7;
	}
	.pagedemo{border: 1px solid #CCC;width:560px;margin:2px;
		padding:50px 10px;text-align:center;background-color:white;	
	}
</style>

2. Content

<div class="content">
<div id="paginationdemo" class="demo">hmweb - jQuery Pagination Plugin
<div id="p1" class="pagedemo _current" style="">hmweb - Nội dung trang 1</div>
<div id="p2" class="pagedemo" style="display:none;">hmweb - Nội dung trang 2</div>
<div id="p3" class="pagedemo" style="display:none;">hmweb - Nội dung trang 3</div>
<div id="p4" class="pagedemo" style="display:none;">hmweb - Nội dung trang 4</div>
<div id="p5" class="pagedemo" style="display:none;">hmweb - Nội dung trang 5</div>
<div id="p6" class="pagedemo" style="display:none;">hmweb - Nội dung trang 6</div>
<div id="p7" class="pagedemo" style="display:none;">hmweb - Nội dung trang 7</div>
<div id="p8" class="pagedemo" style="display:none;">hmweb - Nội dung trang 8</div>
<div id="p9" class="pagedemo" style="display:none;">hmweb - Nội dung trang 9</div>
<div id="p10" class="pagedemo" style="display:none;">hmweb - Nội dung trang 10</div>
<div id="demo">                   
</div>
</div>
</div>

3. Script:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"
 type="text/javascript"></script>
<script src="jquery.paginate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
	$("#demo").paginate({
		count 		: 10,
		start 		: 1,
		display     : 7,
		border					: true,
		border_color			: '#fff',
		text_color  			: '#fff',
		background_color    	: 'black',	
		border_hover_color		: '#ccc',
		text_hover_color  		: '#000',
		background_hover_color	: '#fff', 
		images					: false,
		mouse					: 'press',
		onChange     			: 
		function(page){
		$('._current','#paginationdemo').removeClass('_current').hide();
		$('#p'+page).addClass('_current').show();
	  }
	});
});
</script>

Đặt vấn đề lấy dữ liệu hiển thị và phân trang từ cơ sở dữ liệu thế nào? Cái này mình nghĩ sẽ áp dụng nó trong phần xây dựng website tin tức, khi đó có dữ liệu bài viết mình sẽ áp dụng sẽ dễ minh họa hơn

4. Download:

Theo http://hmweb.com.vn
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.