利用ExtJs中的Ext.PagingToolbar做表格分页的例子

最新推荐文章于 2023-06-17 23:03:49 发布

原创最新推荐文章于 2023-06-17 23:03:49 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #integer #stylesheet #header #autoload #string

本文介绍如何使用ExtJS创建一个具备分页功能的表格，并通过与服务器端交互实现数据加载。示例中详细展示了HTML结构、JavaScript配置及服务器端Java代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Demo.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css"/> <mce:script type="text/javascript" src="../ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js"></mce:script> <mce:script type="text/javascript" src="../ext/ext-all.js" mce_src="ext/ext-all.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="grid"></div> </body> </html>

创建服务器端jsp页面用于产生数据:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ page import="java.util.*" %> <% String start=request.getParameter("start"); String limit=request.getParameter("limit"); System.out.println("start:"+start); System.out.println("limit:"+limit); Integer first=Integer.parseInt(start); Integer limitInt=Integer.parseInt(limit); List<String> list=new ArrayList<String>(); for(int i=0;i<100;i++){ StringBuffer data=new StringBuffer(); data.append("{id:").append(i).append(",name:'").append("tom"+i+"'") .append(",age:").append(i).append("}"); list.add(data.toString()); } StringBuffer showData=new StringBuffer(); int end=first+limitInt; for(int i=first;i<end;i++){ System.out.println(list.get(i)); showData.append(list.get(i)); if(i!=end){ showData.append(","); } } System.out.println(showData.toString()); String json= "{"+ "metaData:{"+ " totalProperty:'results',"+ "root:'rows',"+ "id:'id',"+ "fields:["+ "{name:'personId',mapping:'id'},"+ "{name:'personName',mapping:'name'},"+ "{name:'personAge',mapping:'age'},"+ "]"+ "},"+ "results:"+list.size()+","+ "rows:["+ showData.toString()+ "]"+ "}"; response.getWriter().write(json); %>

效果: