- 浏览: 335383 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (87)
- 条形码 (3)
- Ext (8)
- hibernate (4)
- 数据库 (11)
- java (7)
- IO (1)
- openfire (2)
- js (13)
- jquery (1)
- xml (1)
- android (1)
- css (1)
- 手机 (1)
- tomcat (2)
- ssl (6)
- jbpm (2)
- webservice (3)
- 随记 (1)
- spring (1)
- jfreechart (1)
- struts2 (1)
- 工具 (3)
- Eclipse (1)
- php (2)
- Drools (2)
- linux (1)
- 设计模式 (3)
- git (2)
- ide (1)
- mysql (0)
最新评论
-
youyou_yo:
请问eclipse for developers 如何配置共享 ...
eclipse+apache+php+ZendDebugger配置 -
youyou_yo:
我按照这个操作没有成功,
eclipse+apache+php+ZendDebugger配置 -
ebony_fan:
遇到跟楼主一样的问题,根据你的解决办法已经解决了,感谢分享~
SSL:No Certificate file specified or invalid file format -
黑山老鹞:
一些jar包的作用 -
gwh_08:
wswangyj 写道伟华很勤奋啊 !呵呵,就是感觉有记录的必 ...
递归查询
习惯了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 ={ "&":"&", "<":"<", ">":">", '"':"""} $.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>
注意代码中的注释。
- 用到的js_jar包.zip (73 KB)
- 下载次数: 4
相关推荐
本篇将重点介绍在Java环境中,如何通过三种不同的方式来实现分页功能。 首先,我们来看看什么是分页。分页是将大量数据分成若干小部分,每次只显示一部分,用户可以通过翻页来查看更多的数据。在Web开发中,分页...
本教程将详细讲解SSH框架中的三种分页方式,并通过实例演示它们的实现过程。 ### 1. Hibernate分页 Hibernate作为SSH中的持久层框架,本身就提供了强大的查询和分页功能。我们可以通过`Query`或`Criteria`对象来...
本主题将深入探讨`IDataReader`分页以及SQL中的三种分页方式:基于ROW_NUMBER()的分页、基于LIMIT/OFFSET的分页(在MySQL中常见)和基于游标的分页。 首先,我们来看`IDataReader`分页。`IDataReader`是.NET ...
在网页设计中,分页条是必不可少的一个组件,特别是在数据量大、需要分批展示的场景下,如电商产品列表、...了解并掌握不同分页样式和完整的分页类型,可以帮助我们更好地满足用户需求,创建高效、友好的数据浏览环境。
这三种方法各有优缺点,适用于不同的场景。 1. ROWNUM方法: ROWNUM是Oracle中最基础的分页方式。它会为查询结果集中的每一行分配一个唯一的数字,从1开始。为了实现分页,我们通常需要结合子查询来过滤出特定范围...
SQL Server 提供了多种分页方式,其中较为常见的有使用 `TOP` 与 `ROW_NUMBER()` 函数实现。 ##### 方法一:使用 TOP 和子查询 ```sql -- SQL Server 分页示例 SELECT TOP 5 * FROM book WHERE id > ( SELECT IS...
根据给定的文件信息,本文将详细解释三种存储管理方式的地址换算过程。 首先需要明确的是,存储管理是操作系统的重要组成部分,其主要任务是管理计算机系统中的主存储器资源,合理分配和回收内存空间,以及实现内存...
Oracle 支持多种分页方式,包括三层嵌套分页、ROW_NUMBER() 函数分页及 ROWNUM 控制最大条数的方法。 1. **三层嵌套分页**: ```sql SELECT * FROM ( SELECT row_.*, ROWNUM as rownum FROM ( SELECT sid ...
本文将详细介绍如何在三种不同的数据库系统(SQL Server、Access、Oracle)中实现高效的SQL分页查询。 #### SQL Server 分页查询 SQL Server 支持 `TOP` 关键字,这使得在 SQL Server 中实现分页变得相对简单。...
综上所述,不同的分页方法各有优劣,选择哪种方法取决于具体的业务场景和性能要求。一般来说,如果数据量较小或对性能要求不高,可以考虑使用第一种方法。如果数据量较大且ID分布较为均匀,推荐使用第二种方法。而...
"一个非常好的ASP.NET第三方分页控件"标题所提及的就是这样一种工具,它可能提供了更为丰富和灵活的分页选项。 AspNetPager控件是这个第三方分页控件的名字,它是一个高效且功能强大的组件。AspNetPager.dll是这个...
这两种分页方式都需要与后端数据源配合工作,这可能是一个SQL数据库、XML文件、或者任何其他可以提供数据流的对象。在处理分页时,重要的是有效地从数据源获取数据,只加载当前页所需的内容,以优化性能。 为了运行...
本文将详细介绍三种在SQL中实现分页的技术,帮助读者更好地理解和掌握这一实用技巧。 ### 第一种方法:使用NOT IN与TOP结合 这种方法的基本思路是首先从表中选择出一定数量的记录(比如前20条),然后在剩余的记录...
接下来,AspNetPager分页控件是一种专门用于分页的控件,它提供了一种简单的方式来实现数据集的分页显示。AspNetPager控件可以轻松地集成到任何数据绑定控件中,如DataList,以实现数据的分页浏览。它支持多种分页...
基于SQL的分页是最基础的分页方式,通过在SQL查询语句中添加`LIMIT`(MySQL)或`OFFSET`与`FETCH NEXT`(SQL Server)等关键字来实现。以下是一个MySQL的例子: ```sql SELECT * FROM table LIMIT start, pageSize;...
分页控件是一种UI组件,它允许用户以分页的形式浏览大量数据,避免一次性加载所有数据导致的性能瓶颈和用户界面拥堵。在C#企业级开发中,使用第三方分页控件可以简化开发过程,提供更高效的数据处理机制。 2. **...
以上介绍了几种常见数据库的分页实现方法,可以看出每种数据库的分页方式都有所不同。选择合适的分页方法可以显著提高查询效率,同时也能简化开发过程。在实际应用中,可以根据具体使用的数据库类型和业务需求选择最...