servlet访问数据库返回一个list给js,,js中添加一个过滤数据的属性loadFilter,function实现过滤
dao:
package cn.zt.dao;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import cn.zt.entity.Teacher;
import cn.zt.util.DBHelper;
public class AllTeacherDao extends DBHelper{
public List<Map<String, Object>> getAll(int page,int rows){
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
// String sql = "select id,teachername,password,tel from teacher limit "+(page-1)*rows+","+page*rows+"";
String sql = "select id,teachername,password,tel from teacher";
ResultSet rs = this.executeQuery(sql);
if(rs!=null){
try {
while(rs.next()){
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("id", rs.getInt("id"));
map.put("teachername", rs.getString("teachername"));
map.put("password", rs.getString("password"));
map.put("tel", rs.getString("tel"));
list.add(map);
}
} catch (SQLException e) {
// TODO 自动生成的 catch 块
e.printStackTrace();
}finally {
this.close();
}
System.out.print("AllTeacherDao执行");
return list;
}else return null;
}
}
servlet:
package cn.zt.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import cn.zt.dao.AllTeacherDao;
import cn.zt.entity.Teacher;
import net.sf.json.JSONException;
import net.sf.json.util.JSONStringer;
//@WebServlet("/AllTeacherServlet")
public class AllTeacherServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.service(req, resp);
}
public AllTeacherServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// AllTeacherDao dao= new AllTeacherDao();
// List<Teacher> list = dao.getAll();
// Gson gson=new Gson();
// String str = gson.toJson(list);
// System.out.println(str);
// PrintWriter out = response.getWriter();
// out.write(str);
int page=Integer.parseInt(request.getParameter("page"));
int rows=Integer.parseInt(request.getParameter("rows"));
System.out.println(page);
System.out.println(rows);
AllTeacherDao dao= new AllTeacherDao();
List<Map<String, Object>> list = dao.getAll(page,rows);
JSONStringer stringer = new JSONStringer();
stringer.array();
if(list!=null){
for (int i = 0; i < list.size(); i++) {
Map<String, Object> teacherlist= list.get(i);
try {
stringer.object();
Iterator it = teacherlist.keySet().iterator(); //迭代器,返回一个所有key值的迭代遍历
while (it.hasNext()) {
Object key = it.next();
stringer.key((String) key).value(teacherlist.get(key));
}
stringer.endObject();
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
stringer.endArray();
PrintWriter out = response.getWriter();
out.print(stringer.toString());
// out.print("{total:21,pageSize:10,pageNum:1,rows:"+stringer.toString()+"}");
System.out.println("servlet执行");
}
}
js:
$(function(){
$('#manager').datagrid({
// url:"http://localhost:8080/HSInteraction/AllTeacherServlet",
fit:true,
fitColumns:true,
striped:true,
rownumbers:true,
border:false,
pagination:true,
pageSize:20,
pageList:[10,20,30,40,50],
pageNumber:1,
sortName:'data',
sortOrder:'desc',
toolbar:'#manager_tool',
loadFilter: pagerFilter,//DataGrid属性中有一个用于过滤数据的属性loadFilter
columns:[[
{field:'id',title:'编号',width:100,checkbox:true},
{field:'teachername',title:'教师名称',width:100},
{field:'password',title:'密码',width:100},
{field:'tel',title:'电话号码',width:100}
]]
});
//实现分页功能,list为servlet查询的所有json数据
function pagerFilter(data) {
if (typeof data.length == 'number' && typeof data.splice == 'function') {
//typeof判断变量类型的,12是数字,所以输出的结果是number
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options'); //返回参数对象
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage: function (pageNum, pageSize) {
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh', {
pageNumber: pageNum,
pageSize: pageSize
});
dg.datagrid('loadData', data);
}
});
if (!data.originalRows) {
if(data.rows)
data.originalRows = (data.rows);
else if(data.data && data.data.rows)
data.originalRows = (data.data.rows);
else
data.originalRows = [];
}
var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
});
jsp:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript"src="js/jquery.min.js"></script><!-- jquery全代码 -->
<script type="text/javascript"src="js/jquery.easyui.min.js"></script><!-- jquery中easyui全代码 -->
<script type="text/javascript"src="js/locale/easyui-lang-zh_CN.js"></script><!-- 当地语言包 -->
<link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css"><!-- easyui全样式 -->
<link rel="stylesheet" type="text/css" href="js/themes/icon.css"><!-- easyui图标样式 -->
<link rel="stylesheet" type="text/css" href="css/teacherlogin.css">
<script type="text/javascript" src="js/allteacher.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<div id="manager_tool" >
<div style="height:40px">
<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="add()" style="padding:8;text-align:center;">新增</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="edit()" style="padding:8;text-align:center;">编辑</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="remove()" style="padding:8;text-align:center;">删除</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="save()" style="padding:8;text-align:center;">保存</a>
</div>
</div>
<table id="manager" url="AllTeacherServlet"></table>
</body>
</html>