###
JavaWeb JSP
EasyUI 分页查询实现
方法
#### 1. 准备工作
为了在
JavaWeb项目中使用JSP页面和
EasyUI实现
分页查询，首先需要确保
项目的环境搭建完成。这包括引入必要的库文件以及设置开发工具。
- **引入所需Jar包**
需要引入
EasyUI的JavaScript和CSS资源文件，可以通过CDN链接或者本地路径来加载这些静态资源[^3]。
同时还需要引入用于处理HTTP请求响应的相关Servlet API jar包，以便能够接收前端传来的参数并返回相应的数据给前端显示。
#### 2. 创建数据库连接池
建立稳定的数据库访问机制对于任何基于关系型数据库的应用程序都是至关重要的。可以采用Druid或其他类似的高效能连接池组件来进行管理[^4]。
```xml
<!-- Druid 数据源配置 -->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<!-- 设置基本属性 url、username、password -->
</bean>
```
#### 3. 编写Service层逻辑
编写业务服务类负责具体的业务流程控制和服务接口定义。这里主要涉及到如何获取指定范围内的记录集，并计算总条目数以支持
分页展示需求。
```java
public List<Map<String,Object>> findPageData(int page,int rows){
int start=(page-1)*rows;
String sql = "select * from table limit ?,?";
// 使用PreparedStatement防止SQL注入攻击
PreparedStatement pstmt=conn.prepareStatement(sql);
pstmt.setInt(1,start);
pstmt.setInt(2,rows);
ResultSet rs=pstmt.executeQuery();
while(rs.next()){
Map<String,Object> map=new HashMap<>();
// 将每一行的数据存入map集合中...
list.add(map);
}
}
```
#### 4. 构建Controller控制器
构建一个Servlet作为前后端交互的桥梁，用来解析用户的输入并将结果反馈回去。在这个过程中会调用上面提到的服务层
方法来取得实际的数据列表及其总数信息。
```java
protected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
// 获取当前
页码和每页大小
Integer pageNum=Integer.parseInt(request.getParameter("pageNum"));
Integer pageSize=Integer.parseInt(request.getParameter("pageSize"));
PageBean pb=service.findPage(pageNum,pageSize);
PrintWriter out=response.getWriter();
JSONObject json=new JSONObject();
json.put("total",pb.getTotal());
json.put("rows",JSONArray.toJSON(pb.getList()));
out.print(json.toString());
out.flush();
out.close();
}
```
#### 5. 设计视图界面(JSP)
最后就是设计网页布局部分了，在此阶段主要是利用HTML标签配合
EasyUI控件特性快速构建美观易用的操作面板。特别是datagrid表格组件非常适合做此类场景下的数据显示容器。
```html
<table id="dg"></table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
title:'我的数据',
iconCls:'icon-save',
nowrap: true,
striped: true,
collapsible:true,
fitColumns: true,
singleSelect:false,
pagination:true,
rownumbers:true,
sortName:'id',
sortOrder:'asc',
remoteSort: false,
columns:[[
{field:'ck',checkbox:true},
{title:'编号',field:'id',width:80,sortable:true},
...
]],
toolbar:[
{text:'新增'},
'-',
{text:'删除'}
],
onClickRow:function(rowIndex,rowData){
},
onLoadSuccess:function(data){
console.log('成功');
}
});
});
</script>
```
本文介绍了解决EasyUI框架中文显示乱码的问题，主要步骤包括将easyui-lang-zh_CN.js文件编码格式修改为utf-8bom，并清理浏览器缓存。此方法同样适用于项目中其他地方出现的乱码问题。
扫一扫
1606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
