jQuery Pagination Plugin

冷不防 2022-07-31 15:21 129阅读 0赞

由浅入深完整jQuery Pagination示例：[完整demo][demo]

Pagination  是jQuery的ajax分页插件。使用一次性加载，故分页切换时无刷新与延迟。数据量较大时不太建议用此方法，因为加载会比较慢。

这里分享了jQuery Pagination Plugin的使用，以及扩展加入总页数和跳转功能，欢迎大家一起讨论。

1.jQuery Pagination Plugin的使用。

导入两个js文件：jquery.min.js和jquery.pagination.js。分页的方法是pagination.例如

$("#Pagination").pagination(100);

这里100表示显示项目的总个数，这个参数时必须的。效果图如下:

![SouthEast][]

2.加入总页数和跳转功能的扩展。

首先在jquery.pagination.js中加入一些参数，如下所示：

opts = jQuery.extend({
    		items_per_page:10,
    		num_display_entries:10,
    		current_page:0,
    		num_edge_entries:0,
    		link_to:"#",
    		prev_text:"Prev",
    		next_text:"Next",
    		jump_text:"Jump",
    		isSum:true,
    		isJump:true,
    		jump_format_text:"The number format error",
    		jump_outofrange_text:"The number is out of range",
    		jump_null_text:"The number is not allow null",
    		ellipse_text:"...",
    		prev_show_always:true,
    		next_show_always:true,
    		callback:function(){return true;}
    	},opts||{});

然后找到并修改drawLinks方法。

在分页条的最前面加入总条数，在最后面加入跳转页码输入文本框和跳转链接。

// sum total
    			if(opts.isSum){
    				panel.append("<a>共 "+maxentries+" 条记录</a>");
    			}
    			if(opts.isJump){
    				// Generate Jump Input
    				panel.append(jQuery("<input type='text' id='jump-index' maxlength='4'/>"));
    				// Generate Jump Handler
    				var index = null;
    				var jump = jQuery("<a>"+opts.jump_text+"</a>").bind("click",function(evt){
    					var jumpinput = jQuery("#jump-index");
    					index = jumpinput.val();
    					if(index == null || index == ""){
    						alert(opts.jump_null_text);
    						return;
    					}
    					if(/^\d+$/.test(index)){
    						if(index > numPages() || index < 1){
    							alert(opts.jump_outofrange_text);
    							jumpinput.val("");
    							return;
    						}
    						index-=1;
    						return pageSelected(index,evt);
    					}else{
    						alert(opts.jump_format_text);
    						jumpinput.val("");
    						return;
    					}
    				}).attr("href", opts.link_to.replace(/__id__/,index));
    				panel.append(jump);
    			}

完整的drawLinks方法如下所示：

/**
    		 * This function inserts the pagination links into the container element
    		 */
    		function drawLinks() {
    			panel.empty();
    			var interval = getInterval();
    			var np = numPages();
    			// This helper function returns a handler function that calls pageSelected with the right page_id
    			var getClickHandler = function(page_id) {
    				return function(evt){ return pageSelected(page_id,evt); }
    			}
    			// Helper function for generating a single link (or a span tag if it's the current page)
    			var appendItem = function(page_id, appendopts){
    				page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
    				appendopts = jQuery.extend({text:page_id+1, classes:""}, appendopts||{});
    				if(page_id == current_page){
    					var lnk = jQuery("<span class='current'>"+(appendopts.text)+"</span>");
    				}
    				else
    				{
    					var lnk = jQuery("<a>"+(appendopts.text)+"</a>")
    						.bind("click", getClickHandler(page_id))
    						.attr('href', opts.link_to.replace(/__id__/,page_id));
    				}
    				if(appendopts.classes){lnk.addClass(appendopts.classes);}
    				panel.append(lnk);
    			}
    			// sum total
    			if(opts.isSum){
    				panel.append("<a>共 "+maxentries+" 条记录</a>");
    			}
    			// Generate "Previous"-Link
    			if(opts.prev_text && (current_page > 0 || opts.prev_show_always)){
    				appendItem(current_page-1,{text:opts.prev_text, classes:"prev"});
    			}
    			// Generate starting points
    			if (interval[0] > 0 && opts.num_edge_entries > 0)
    			{
    				var end = Math.min(opts.num_edge_entries, interval[0]);
    				for(var i=0; i<end; i++) {
    					appendItem(i);
    				}
    				if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
    				{
    					jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
    				}
    			}
    			// Generate interval links
    			for(var i=interval[0]; i<interval[1]; i++) {
    				appendItem(i);
    			}
    			// Generate ending points
    			if (interval[1] < np && opts.num_edge_entries > 0)
    			{
    				if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
    				{
    					jQuery("<span>"+opts.ellipse_text+"</span>").appendTo(panel);
    				}
    				var begin = Math.max(np-opts.num_edge_entries, interval[1]);
    				for(var i=begin; i<np; i++) {
    					appendItem(i);
    				}
    			}
    			// Generate "Next"-Link
    			if(opts.next_text && (current_page < np-1 || opts.next_show_always)){
    				appendItem(current_page+1,{text:opts.next_text, classes:"next"});
    			}
    			if(opts.isJump){
    				// Generate Jump Input
    				panel.append(jQuery("<input type='text' id='jump-index' maxlength='4'/>"));
    				// Generate Jump Handler
    				var index = null;
    				var jump = jQuery("<a>"+opts.jump_text+"</a>").bind("click",function(evt){
    					var jumpinput = jQuery("#jump-index");
    					index = jumpinput.val();
    					if(index == null || index == ""){
    						alert(opts.jump_null_text);
    						return;
    					}
    					if(/^\d+$/.test(index)){
    						if(index > numPages() || index < 1){
    							alert(opts.jump_outofrange_text);
    							jumpinput.val("");
    							return;
    						}
    						index-=1;
    						return pageSelected(index,evt);
    					}else{
    						alert(opts.jump_format_text);
    						jumpinput.val("");
    						return;
    					}
    				}).attr("href", opts.link_to.replace(/__id__/,index));
    				panel.append(jump);
    			}
    		}

3.应用

如下是html页面的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<link href="pagination.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" src="core.js"></script>
            <script src="pagination.js" type="text/javascript"></script>
            
            
            <script type="text/javascript" src="data.js"></script>
            
            <script type="text/javascript">
                
                // This file demonstrates the different options of the pagination plugin
                // It also demonstrates how to use a JavaScript data structure to 
                // generate the paginated content and how to display more than one 
                // item per page with items_per_page.
                        
                /**
                 * Callback function that displays the content.
                 *
                 * Gets called every time the user clicks on a pagination link.
                 *
                 * @param {int}page_index New Page index
                 * @param {jQuery} jq the container with the pagination links as a jQuery object
                 */
    			function pageselectCallback(page_index, jq){
                    // Get number of elements per pagionation page from form
                    var items_per_page = $('#items_per_page').val();
                    var max_elem = Math.min((page_index+1) * items_per_page, members.length);
                    var newcontent = '';
                    
                    // Iterate through a selection of the content and build an HTML string
                    for(var i=page_index*items_per_page;i<max_elem;i++)
                    {
                        newcontent += '<dt>' + members[i][0] + '</dt>';
                        newcontent += '<dd class="state">' + members[i][2] + '</dd>';
                        newcontent += '<dd class="party">' + members[i][3] + '</dd>';
                    }
                    
                    // Replace old content with new content
                    $('#Searchresult').html(newcontent);
                    
                    // Prevent click eventpropagation
                    return false;
                }
                
                // The form contains fields for many pagiantion optiosn so you can 
                // quickly see the resuluts of the different options.
                // This function creates an option object for the pagination function.
                // This will be be unnecessary in your application where you just set
                // the options once.
                function getOptionsFromForm(){
                    var opt = {callback: pageselectCallback};
                    // Collect options from the text fields - the fields are named like their option counterparts
                    $("input:text").each(function(){
                        opt[this.name] = this.className.match(/numeric/) ? parseInt(this.value) : this.value;
                    });
                    // Avoid html injections in this demo
                    var htmlspecialchars ={ "&":"&", "<":"<", ">":">", '"':"""}
                    $.each(htmlspecialchars, function(k,v){
                        opt.prev_text = opt.prev_text.replace(k,v);
                        opt.next_text = opt.next_text.replace(k,v);
                    })
                    return opt;
                }
    			
                // When document has loaded, initialize pagination and form 
                $(document).ready(function(){
                	// sum total
                	var length = members.length;
    				// Create{} pagination element with options from form
    				var optInit = getOptionsFromForm();
    	            $("#Pagination").pagination(length, optInit);
    	            // 按钮事件
    	            $("#setoptions").click(function(){
    	            	var opt = getOptionsFromForm();
    	            	// 重新创建分页参数
    	            	$("#Pagination").pagination(length,opt);
    	            });
               });
                
            </script>
            <style type="text/css">
             
            </style>
    		
            <title>Pagination</title>
        </head>
        <body>
        	<h1>jQuery Pagination Plugin Demo</h1>
            <div id="Pagination" class="pagination">
            </div>
    		<br style="clear:both;" />
            <h3>List of former members of the United States House of Representatives (A)</h3>
    		<dl id="Searchresult">
    			<dt>Search Results will be inserted here ...</dt>
    		</dl>
            <h3>Config form for pagination parameters</h3>
            
    		<form name="paginationoptions">
    			<p><label for="items_per_page">Number of items per page</label><input type="text" value="5" name="items_per_page" id="items_per_page" class="numeric"/></p>
    			<p><label for="num_display_entries">Number of pagination links shown</label><input type="text" value="10" name="num_display_entries" id="num_display_entries" class="numeric"/></p>
    			<p><label for="num">Number of start and end points</label><input type="text" value="2" name="num_edge_entries" id="num_edge_entries" class="numeric"/></p>
    			<p><label for="prev_text">"Previous" label</label><input type="text" value="Prev" name="prev_text" id="prev_text"/></p>
    			<p><label for="next_text">"Next" label</label><input type="text" value="Next" name="next_text" id="next_text"/></p>
    			<input type="button" id="setoptions" value="Set options" />
    		</form>
    		<div id="footer">
    			Copyright © 2008-2009 by <a href="http://www.d-scribe.de/">describe europe Ltd.</a>.
    		</div>
        </body>
    </html>

在data.js里面是加载的数据定义了一个json数组变量members。通过getOptionsFromForm方法的到分页参数，在getOptionsFromForm中调用回调函数，加载分页内容。回调函数有两个参数，一个是page\_index，另一个是jq，前一个表示您当前点击的那个分页的页数索引值，后一个参数表示装载容器。这里的页数索引值是关键，我们要根据这个索引值找到对应的（例如）members中的元素，然后再指定的容器中显示出来，demo中提供了装载单元素以及多元素的方法，相信不会有太大问题。

最终效果如图所示

![SouthEast 1][]

4.参考文献：

[http://blog.csdn.net/shadowsick/article/details/8570591][http_blog.csdn.net_shadowsick_article_details_8570591]

[http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/][http_www.zhangxinxu.com_wordpress_2010_01_jquery-pagination-ajax_E5_88_86_E9_A1_B5_E6_8F_92_E4_BB_B6_E4_B8_AD_E6_96_87_E8_AF_A6_E8_A7_A3]

[demo]: http://download.csdn.net/detail/licheng989/8925867
[SouthEast]: /images/20220731/6d29a6f51e7b4e4cafd1a102d928c137.png
[SouthEast 1]: /images/20220731/f6464965ce724ac3bd4a7aee20e099d0.png
[http_blog.csdn.net_shadowsick_article_details_8570591]: http://blog.csdn.net/shadowsick/article/details/8570591
[http_www.zhangxinxu.com_wordpress_2010_01_jquery-pagination-ajax_E5_88_86_E9_A1_B5_E6_8F_92_E4_BB_B6_E4_B8_AD_E6_96_87_E8_AF_A6_E8_A7_A3]: http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6%E4%B8%AD%E6%96%87%E8%AF%A6%E8%A7%A3/