jquery pagination使用(笔记)

最新推荐文章于 2024-05-21 17:16:51 发布

原创最新推荐文章于 2024-05-21 17:16:51 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #xhtml #ViewUI

本文介绍了如何使用jQuery实现分页功能，通过设置参数自定义每页显示的条目数、连续分页主体部分显示的分页条目数、当前选中的页面、两侧显示的首尾分页的条目数等，同时提供了页面选择回调函数用于处理分页后的数据展示。

http://www.cnblogs.com/linzheng/archive/2010/11/07/1871069.html //这里也有个学习例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>word-break</title> 
<link rel="stylesheet"   type="text/css" href="css/pagination.css"  />
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript">
		
		//window onload event
		$(function(){
					/*
						members.length  总长度
						opt:默认配置属性
					*/
				 var optInit = getOptionsFromForm();
                $("#Pagination").pagination(members.length, optInit);
                
				// Event Handler for for button
				$("#setoptions").click(function(){
                    var opt = getOptionsFromForm();
                    // Re-create pagination content with new parameters
					
                    $("#Pagination").pagination(members.length, opt);
                }); 
		});
		/**
			page_index  表示每页索引
			jq pagination容器（一个DOM元素)
			回调函数
		*/
		function pageselectCallback(page_index, jq){
				
				//后台代码在这里写

                // Get number of elements per pagionation page from form
                var items_per_page =10;// $('#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
                $('#search_result').html(newcontent);
                
                // Prevent click eventpropagation
                return false;
            }
			function getOptionsFromForm(){
                var opt = {
							items_per_page:10,		//每页显示的条目数
							num_display_entries:2,	//连续分页主体部分显示的分页条目数
							current_page:5,//当前选中的页面,默人为0,表示第一页
							num_edge_entries:3,//两侧显示的首尾分页的条目数
							link_to:"javascript:void(0)",//分页的链接
							prev_text:"上一页",//“前一页”分页按钮上显示的文字
							next_text:"下一页",//“下一页”分页按钮上显示的文字
							ellipse_text:".....",//省略的页数用什么文字表示
							prev_show_always:true,//是否显示“前一页”分页按钮,可选参数，默认为true，即显示“前一页”按钮
							next_show_always:true,//是否显示“下一页”分页按钮,是否显示“下一页”分页按钮
							callback: pageselectCallback
						};
                
                return opt;
            }
</script>
		
<style type="text/css">
	
</style>

<body>
	<div id="search_result"></div><br/>
	<div id="Pagination" class="pagination"></div>
</body> 
</html>