简单的jQuery表格分页效果实现代码

时间:12-11-09 栏目:网站开发 作者:admin 评论:3 点击: 17,249 次

<div class="pager"><div id="pages_box" class="pagernum"></div></div>

<script>
jQuery(document).ready(function(){ 
		var rows = jQuery("#shop_table>tbody>tr").length; 
		var no_begin_page = 4; //相当于pagesize
		var no_pages = Math.ceil(rows/no_begin_page); //总页数
		var jQuerypagenumbers = jQuery('<div id="pages"></div>'); 
		for(var i=0;i<no_pages;i++) 
		{ 
		//pagecurrent
			jQuery('<a href="#" class="page">'+(i+1)+'</a>').appendTo(jQuerypagenumbers);
		} 
		jQuerypagenumbers.appendTo('#pages_box'); //页码
		jQuery("#shop_table>tbody>tr").hide(); 
		var tr = jQuery('#shop_table>tbody>tr'); 
		//这个for循环是为了将第一条记录显示
		for (var i=0;i<no_begin_page;i++) 
		{ 
			jQuery(tr[i]).show(); 
		} 
		jQuery('.page:eq(0)').addClass('pagecurrent');
		//点击页码事件,显示分页
		jQuery('.page').click(function(event){ 
			jQuery('.page').removeClass('pagecurrent');
			jQuery(this).addClass('pagecurrent');
			jQuery("#shop_table>tbody>tr").hide(); 
			for(var i=(jQuery(this).text()-1)*no_begin_page;i<=jQuery(this).text()*no_begin_page-1;i++) { 
				jQuery(tr[i]).show(); 
			} 
			return false;
		}); 
 });
 </script>

 

声明: 本文由( admin )原创编译,转载请保留链接: 简单的jQuery表格分页效果实现代码

简单的jQuery表格分页效果实现代码:目前有3 条留言

  1. 地板
    初学者:

    能分享下你的代码补?很需要!

    2013-03-07 12:58 am [回复]
  2. 板凳
    初学者:

    能分享下你的代码补??很需要,刚开始学这个太深的看补太懂,[email protected]

    2013-03-07 12:59 am [回复]
  3. 沙发
    admin:

    所有代码都在上面了。

    2013-04-09 4:00 pm [回复]

发表评论


------====== 本站公告 ======------
联系信息:
电话:19970108113(微信同号) QQ:3142401606
支付宝:https://me.alipay.com/lxq73061
相关插件程序等信息均会在站内发布,敬请关注。

读者排行