jQuery插件--分页插件

最新推荐文章于 2020-06-25 16:41:23 发布

原创最新推荐文章于 2020-06-25 16:41:23 发布 · 122 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #HTML #CSS #ViewUI

jQuery 专栏收录该内容

4 篇文章

订阅专栏

之前有在javaeye上看到使用jQuery插件来解决分页的方案，此处记录一下。

具体知识点，请看代码注释。

先上图先:

首先来看一下页面调用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>分页插件</title>
		<link rel="stylesheet" href="page.css"/>
		<script type="text/javascript" src="jquery-1.2.6.js"></script>
		<script type="text/javascript" src="jquery.page.js"></script>
		<script type="text/javascript">			
			$(document).ready(function(){
				 //选择渲染地点，然后调用，传入中页数，可以与服务器端很好结合
			$('#mypaget').mypage(10112,{
				callback:function(page){
					$('#result').html("<font>回调函数-----您选择了第"+page+"页</font>");
				}
			});
		});
		</script>
	</head>
	<body>
	<div id="mypaget" class="mypage"></div>
	<div id="result" class="mypage"></div>
	</body>
</html>

插件具体实现代码：

$.fn.mypage = function(totalProperty, opts){
	//这里是插件实现的另一种方式 
    //$.extend 用于扩展自身方法
    opts = $.extend({
        perPage: 10,
        callback: function(){
        }
    }, opts ||
    {});
    
    return this.each(function(){
        /*计算总共页数*/
        function pagenum(){
            return Math.ceil(totalProperty / opts.perPage);
        }
        
        
        /*选定第几页*/
        function selectPage(page){
            return function(){
                currPage = page;
                if (page < 0) 
                    currPage = 0;
                if (page >= pagenum()) 
                    currPage = pagenum() - 1;
                
                render();
                
                $('img.page-wait', panel).attr('src', 'image/wait.gif');
                opts.callback(currPage + 1);
                $('img.page-wait', panel).attr('src', 'image/nowait.gif');
                
            }
        }
        
		
        /*渲染操作*/
        function render(){
            var html = '<table><tbody><tr>' +
            '<td><a href="#"><img class="page-first"></a></td>' +
            '<td><a href="#"><img class="page-prev"></a></td>' +
            '<td><span>第<input type="text" class="page-num">页/共' +
            pagenum() +
            '页</span></td>' +
            '<td><a href="#"><img class="page-next"></a></td>' +
            '<td><a href="#"><img class="page-last"></a></td>' +
            '<td><img src="images/nowait.gif" class="page-wait"></td>' +
            '<td><span style="padding-left:50px;">检索到' +
            totalProperty +
            '记录</span></td>' +
            '</tr></tbody></table>';
            
            
            var imgfirst = 'image/page-first-disabled.gif';
            var imgnext = 'image/page-next-disabled.gif';
            var imgprev = 'image/page-prev-disabled.gif';
            var imglast = 'image/page-last-disabled.gif';
            
            if (currPage > 0) {
                imgfirst = 'image/page-first.gif';
                imgprev = 'image/page-prev.gif';
            }
            
            if (currPage < pagenum() - 1) {
                imgnext = 'image/page-next.gif';
                imglast = 'image/page-last.gif';
            }
            
            panel.empty();
            panel.append(html);
            
            /*添加相应的属性,绑定分页事件*/
            $('img.page-first', panel).bind('click', selectPage(0)).attr('src', imgfirst);
            
            $('img.page-next', panel).bind('click', selectPage(currPage + 1)).attr('src', imgnext);
            
            $('img.page-prev', panel).bind('click', selectPage(currPage - 1)).attr('src', imgprev);
            
            $('img.page-last', panel).bind('click', selectPage(pagenum() - 1)).attr('src', imglast);
            
            $('input.page-num', panel).val(currPage + 1).change(function(){
                /*调用选择页面方法,将当前的参数传入进去*/
                selectPage($(this).val() - 1)();
            });
            
        }
        var currPage = 0;
        var panel = $(this);
        render();
    });
    
}