`
gwh_08
  • 浏览: 335383 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

三种不同的分页方式

 
阅读更多

习惯了ext的Ext.grid.GridPanel与Ext.data.Store封装好了的分页方式以及

ajax处理方式

Ext.Ajax.request({
         	url: 'xxx.action',
			failure: function(form, action){
    			xxxx;
			},
			success: function(response, action){
				xxxx;
			}
		});
 

和对后台响应json的处理

Ext.Ajax.request({
         	url: 'xxx.action',
			failure: function(form, action){
    			   xxxx;
			},
			success : function(form, action) {
 		            var jsonData =  Ext.util.JSON.decode(action.response.responseText);
                          }
		});

 突然让手写jsp风格的分页，突然搓手不及了，可怜，两年没有手写过纯jsp页面了，回忆，查阅api终于按时交工，一方自己再次怠慢，先整理如下，以防再次出现窘迫的情况。

1.ext分页，略。

2.jquery插件jquery.pagination.js分页:

首先假设server端代码响应没问题，且返回形式为json：具体如下：

public void outJsonArray(Object array) {
		try {
		        HttpServletResponse res = ServletActionContext.getResponse();
		        res.setContentType("text/javascript;charset=UTF-8");
		        PrintWriter out = res.getWriter();
		        out.write(JSONArray.fromObject(array).toString());
	          } catch (IOException e) {
	          }
	}
public void jsonTest(){
		try {
			List<UserVO> list = userService.findAllUser();
			outJsonArray(list);
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

 

jsp代码如下:

<%@ page pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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 rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/js/pagination.css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-1.7.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.pagination.js"></script>
        
<!-- Load data to paginate -->
<script type="text/javascript">
     // 当文档加载时,获取数据 initialize pagination and form 
     var jso = "";
     $(document).ready(function(){
		 getData();
     });
     //jqueryAjax调用后台action获取数据
    /*  jQuery.post(url,data,success(data, textStatus, jqXHR),dataType);
     	该函数是简写的 Ajax 函数，等价于：

     $.ajax({
       type: 'POST',
       url: url,
       data: data,
       success: success,
       dataType: dataType
     }); */
     function getData(){
    	 $.post("jsonTestUser.action",function(result){
    		 	jso = result;
    		 	initpag(jso);
    		    }, "json");
     }
    //初始化pagination插件 and form表单参数
    function initpag(jso){
	    // 根据form表单创建 pagination element
	    var optInit = getOptionsFromForm();
	    $("#Pagination").pagination(jso.length, optInit);
	         
		// Event Handler for for button
		$("#setoptions").click(function(){
		    var opt = getOptionsFromForm();
		    // Re-create pagination content with new parameters
		    $("#Pagination").pagination(jso.length, opt);
	    }); 
    }
     // 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, jso.length);
            var newcontent = '';
            newcontent += '<table width=80% align="center" cellpadding=0 cellspacing="1" style="border:1px solid black">\r\n';
            newcontent += '<tr>';
        	newcontent +='<td colspan="4" ><div class="mytitle">用户列表</div></td>'; 
       		newcontent +=   '</tr>';
        	newcontent +=   '<tr class="pt9" height="30">';
        	newcontent +=   '<td><b>登陆名</b></td>';
        	newcontent +=   '<td><b>昵称</b></td>';
        	newcontent +=  '<td><b>性别</b></td> ';
        	newcontent +=   '<td><b>电子邮箱</b></td>';
        	newcontent += '</tr>';
            // Iterate through a selection of the content and build an HTML string
            for(var i=page_index*items_per_page;i<max_elem;i++){
            	var loginName = jso[i].loginName;
            	var userName  = jso[i].userName;
            	var userSex   = jso[i].userSex;
            	var userEmail = jso[i].userEmail;
            	newcontent += '<tr>';
            	newcontent += '<td>'+loginName+'</td>';
                newcontent += '<td>'+userName+'</td>';
                newcontent += '<td>'+userSex+'</td>';
                newcontent += '<td>'+userEmail+'</td>';
                newcontent += '</tr>';
            }
            newcontent += '</table>';
            // 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 ={ "&":"&amp;", "<":"&lt;", ">":"&gt;", '"':"&quot;"}
            $.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;
        }
        
    
		
        
        </script>
        <style type="text/css">
         <!--
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #fff;
            margin: 20px;
            padding: 0;
            height: 100%;
            font-family: Arial, Helvetica, sans-serif;
        }
		
		h1 {
			margin-bottom:10px;
			font-size:1.5em;
		}
        
        h3 {
			margin-top:10px;
			font-size:1em;
		}
        
		#Searchresult {
			margin-top:15px;
			margin-bottom:15px;
			border:solid 1px #eef;
			padding:5px;
			background:#eef;
            width:40%;
		}
        
        #Searchresult dt {
            font-weight:bold;
        }
        
        #Searchresult dd {
            margin-left:25px;
        }
		
		#footer {
			margin-top:20px;
			font-size:60%;
			color:#15B;
		}
		
		label {
			float:left;
			width:250px;
			display:block;
		}
		
		form p {
			clear:both;
		}
		
        -->
        </style>
		
        <title>jQuery and jQuery Pagination Plugin and json Demo</title>
    </head>
    <body>
    	<h1>jQuery and jQuery Pagination Plugin and json 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>
        <!-- This form is just to demonstrate the whole range of options and display styles. -->
		<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>
    </body>
</html>

 3.ajax方式分页

首先假设server端代码响应没问题，且返回形式为json：具体如下：

public class Page<T> {
//公共变量
	public static final String ASC = "asc";
	public static final String DESC = "desc";

	public static final int MIN_PAGESIZE = 2;
	public static final int MAX_PAGESIZE = 200;

	//分页参数
	protected int pageNo = 1;
	protected int pageSize = MIN_PAGESIZE;
	protected String orderBy = null;
	protected String order = null;
	protected boolean autoCount = true;

	//返回结果
	protected List<T> result = Collections.emptyList();
	protected int totalCount = -1;
        //get，set方法；略
}
  
public class ListRange<T> {
	boolean success;
	String message;
	long totalCount;
	List<T> list;
        
       //get，set方法；略
 }
  
public void outJson(Object array) {
		try {
		        HttpServletResponse res = ServletActionContext.getResponse();
		        res.setContentType("text/javascript;charset=UTF-8");
		        PrintWriter out = res.getWriter();
		        out.write(JSONObject.fromObject(obj).toString());
	          } catch (IOException e) {
	          }
	}

 

 

public void ajaxTest() {
		LOG.info("in list method");
		ListRange<UserVO> listRange = new ListRange<UserVO>();
		try {//param获取页面传过来的参数
                       //start,sql查询语句开始查询起始值
                       //limit，sql查询个数；sort,sql查询排序对象；dir,sql查询顺序，desc或asc
                     
                        Page<UserVO> page = userService.findUserList(param);
			if (page != null) {
				listRange.setList(page.getResult());
				listRange.setTotalCount(page.getTotalCount());
				//保存开始页信息
				listRange.setMessage(start);
				listRange.setSuccess(true);
			}
		} catch (Exception e) {
			listRange.setSuccess(false);
			LOG.error("查询失败", e);
			e.printStackTrace();
		}
		
		outJson(listRange);
	}

 jsp页面代码如下：

<%@ page pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!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" />
        
<!-- Load data to paginate -->
<script type="text/javascript">
var xmlhttp ;
//创建对象

function updataTable(method,url,start){
    if (window.XMLHttpRequest){
	     // code for IE7+, Firefox, Chrome, Opera, Safari
	     xmlhttp=new XMLHttpRequest();
   }
   else{
  	 // code for IE6, IE5
	     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
    var _url = url + "?start="+start+"&limit=2&sort=loginName&dir=desc";
    xmlhttp.onreadystatechange = callback1;
       xmlhttp.open("post",_url,true);
	    xmlhttp.send();
}


function winload(){
   updataTable("GET","ajaxTestUser.action",0);
}

 function callback1(){
    if(xmlhttp.readyState == 4){
          if(xmlhttp.status == 200){
           var json =  xmlhttp.responseText;
           //对json的处理，注意是eval('('+json+')');若为eval(json);会报错
	    	 var doc = eval('('+json+')');
            var currentPage = doc.message;
            var totalPage = doc.totalCount;//总数据条数
            var prePage = parseInt(currentPage) - 2;
            var nextPage = parseInt(currentPage) + 2;
            var innerHTML = "";
            if (parseInt(totalPage)>0) {
                innerHTML += "<table width=\"100%\" cellpadding=\"2\" cellspacing=\"0\" border=\"0\">\r\n";
                innerHTML += '<tr>';
	        	innerHTML +='<td colspan="4" ><div class="mytitle">用户列表</div></td>'; 
	       		innerHTML +=   '</tr>';
	        	innerHTML +=   '<tr class="pt9" height="30">';
	        	innerHTML +=   '<td><b>登陆名</b></td>';
	        	innerHTML +=   '<td><b>昵称</b></td>';
	        	innerHTML +=  '<td><b>性别</b></td> ';
	        	innerHTML +=   '<td><b>电子邮箱</b></td>';
	        	innerHTML += '</tr>';
	        	for(var i=0;i<doc.list.length;i++){
	            	var loginName = doc.list[i].loginName;
	            	var userName  = doc.list[i].userName;
	            	var userSex   = doc.list[i].userSex;
	            	var userEmail = doc.list[i].userEmail;
	            	innerHTML += '<tr>';
	            	innerHTML += '<td>'+loginName+'</td>';
	                innerHTML += '<td>'+userName+'</td>';
	                innerHTML += '<td>'+userSex+'</td>';
	                innerHTML += '<td>'+userEmail+'</td>';
	                innerHTML += '</tr>';
	            }
	            innerHTML += '</table>\r\n';
            } else {
                innerHTML += "暂时没有任何用户";
            }   
            document.getElementById("newslist").innerHTML = innerHTML;
            document.getElementById("prePage").innerHTML = "<a href=\"javascript:void(0)\" onClick=\"goToStart('" + prePage + "')\">上一页</a>";
            document.getElementById("nextPage").innerHTML = "<a href=\"javascript:void(0)\" onClick=\"goToStart('" + nextPage + "')\">下一页</a>";

          } else{
              alert("返回状态有错"+xmlhttp.status);
          }
    }
 }
 
 
 //页面跳转
function goToStart(start) {

   updataTable("get","ajaxTestUser.action",start);	
}
</script>
		
        <title>Ajax Page DEMO</title>
    </head>
    <body>
    	<h1>Ajax Page Demo</h1>
       <table width="500" border="0" cellspacing="0" cellpadding="4">
			<tr>
				<td align="center">
    				<button onclick="winload()">打开窗口</button>
				</td>
			</tr>
		</table>
		<table width="500" border="0" cellspacing="0" cellpadding="4">
			<tr>
				<td align="center" height="200" valign="top">
					<label id="newslist"></label>
				</td>
			</tr>
		</table>
		<table width="500" border="0" cellspacing="0" cellpadding="4">
			<tr>
				<td align="center">
					<label id="prePage">
						上一页
					</label>
					<label id="nextPage">
						下一页
					</label>
				</td>
			</tr>
		</table>
    </body>
</html>
 

 注意代码中的注释。

分享到：
| json与字符串
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    三种方式实现分页

    本篇将重点介绍在Java环境中，如何通过三种不同的方式来实现分页功能。 首先，我们来看看什么是分页。分页是将大量数据分成若干小部分，每次只显示一部分，用户可以通过翻页来查看更多的数据。在Web开发中，分页...

    SSH框架三种分页方式 演示实例

    本教程将详细讲解SSH框架中的三种分页方式，并通过实例演示它们的实现过程。 ### 1. Hibernate分页 Hibernate作为SSH中的持久层框架，本身就提供了强大的查询和分页功能。我们可以通过`Query`或`Criteria`对象来...

    ataReader分页与SQL三种分页方式

    本主题将深入探讨`IDataReader`分页以及SQL中的三种分页方式：基于ROW_NUMBER()的分页、基于LIMIT/OFFSET的分页（在MySQL中常见）和基于游标的分页。 首先，我们来看`IDataReader`分页。`IDataReader`是.NET ...

    分页条 分页样式 完整分页三种

    在网页设计中，分页条是必不可少的一个组件，特别是在数据量大、需要分批展示的场景下，如电商产品列表、...了解并掌握不同分页样式和完整的分页类型，可以帮助我们更好地满足用户需求，创建高效、友好的数据浏览环境。

    Oracle 3种分页SQL方法比较

    这三种方法各有优缺点，适用于不同的场景。 1. ROWNUM方法： ROWNUM是Oracle中最基础的分页方式。它会为查询结果集中的每一行分配一个唯一的数字，从1开始。为了实现分页，我们通常需要结合子查询来过滤出特定范围...

    三种数据库SQL分页方法详解

    SQL Server 提供了多种分页方式，其中较为常见的有使用 `TOP` 与 `ROW_NUMBER()` 函数实现。 ##### 方法一：使用 TOP 和子查询 ```sql -- SQL Server 分页示例 SELECT TOP 5 * FROM book WHERE id &gt; ( SELECT IS...

    操作系统课设——三种存储管理方式的地址换算.pdf

    根据给定的文件信息，本文将详细解释三种存储管理方式的地址换算过程。 首先需要明确的是，存储管理是操作系统的重要组成部分，其主要任务是管理计算机系统中的主存储器资源，合理分配和回收内存空间，以及实现内存...

    各数据库分页语法支持

    Oracle 支持多种分页方式，包括三层嵌套分页、ROW_NUMBER() 函数分页及 ROWNUM 控制最大条数的方法。 1. **三层嵌套分页**： ```sql SELECT * FROM ( SELECT row_.*, ROWNUM as rownum FROM ( SELECT sid ...

    三种数据库利用SQL语句进行高效果分页

    本文将详细介绍如何在三种不同的数据库系统（SQL Server、Access、Oracle）中实现高效的SQL分页查询。 #### SQL Server 分页查询 SQL Server 支持 `TOP` 关键字，这使得在 SQL Server 中实现分页变得相对简单。...

    SQL分页语句的三种方法的比较

    综上所述，不同的分页方法各有优劣，选择哪种方法取决于具体的业务场景和性能要求。一般来说，如果数据量较小或对性能要求不高，可以考虑使用第一种方法。如果数据量较大且ID分布较为均匀，推荐使用第二种方法。而...

    一个非常好的asp.net第三方分页控件

    "一个非常好的ASP.NET第三方分页控件"标题所提及的就是这样一种工具，它可能提供了更为丰富和灵活的分页选项。 AspNetPager控件是这个第三方分页控件的名字，它是一个高效且功能强大的组件。AspNetPager.dll是这个...

    c# 多种方式进行分页

    这两种分页方式都需要与后端数据源配合工作，这可能是一个SQL数据库、XML文件、或者任何其他可以提供数据流的对象。在处理分页时，重要的是有效地从数据源获取数据，只加载当前页所需的内容，以优化性能。 为了运行...

    sql分页技术（三种方法）

    本文将详细介绍三种在SQL中实现分页的技术，帮助读者更好地理解和掌握这一实用技巧。 ### 第一种方法：使用NOT IN与TOP结合 这种方法的基本思路是首先从表中选择出一定数量的记录（比如前20条），然后在剩余的记录...

    DataList控件与AspNetPager分页控件三层实现

    接下来，AspNetPager分页控件是一种专门用于分页的控件，它提供了一种简单的方式来实现数据集的分页显示。AspNetPager控件可以轻松地集成到任何数据绑定控件中，如DataList，以实现数据的分页浏览。它支持多种分页...

    jsp分页三种

    基于SQL的分页是最基础的分页方式，通过在SQL查询语句中添加`LIMIT`（MySQL）或`OFFSET`与`FETCH NEXT`（SQL Server）等关键字来实现。以下是一个MySQL的例子： ```sql SELECT * FROM table LIMIT start, pageSize;...

    C#企业级开发 第三方分页控件

    分页控件是一种UI组件，它允许用户以分页的形式浏览大量数据，避免一次性加载所有数据导致的性能瓶颈和用户界面拥堵。在C#企业级开发中，使用第三方分页控件可以简化开发过程，提供更高效的数据处理机制。 2. **...

    不同数据库中分页的代码实现

    以上介绍了几种常见数据库的分页实现方法，可以看出每种数据库的分页方式都有所不同。选择合适的分页方法可以显著提高查询效率，同时也能简化开发过程。在实际应用中，可以根据具体使用的数据库类型和业务需求选择最...

Magicbox
Global site tag (gtag.js) - Google Analytics