js前台分页显示后端JAVA数据响应

2024-10-04 17:36:19

好久没有写过代码了，手有些痒了，正好底下小弟们某些功能的实现着实影响工程进度，便自己动手给写了一段。

功能：js前台分页显示 + 后台数据响应(JAVA Servlet即可)
框架：jquery1.8.7
此文目的：给那些刚入行软件开发，喜欢这也看看，那也看看，这儿copy一下，那儿copy一下初级小菜鸟们做一个表帅;
1 为程序者需认真踏实坐下来;
2 程序需要有投入才有收获;
3 有收获才有鼓舞，才有动力一步一步往下走！

下面上代码，具体会有小注释
1、web页面的逻辑处理(js代码写到页面里时，有个好处，调试时不会受js文件缓存的影响)

代码如下:

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>订单结算</title>
<script type="text/javascript" src="js/jquery-1.8.7.min.js"></script>
<LINK href="images/style.css" type="text/css" rel="stylesheet">
</head>
<body>
<div align="left" style="width: 83%">
<p style="color: blue">
采购单状态:
<select id="orderstatus">
<option value="" SELECTED>-search all!-</option>
<option value="未结">未结</option>
<option value="部分">部分</option>
<option value="已结">已结</option>
</select>

<input type="button" style="height: 25px;width:70px" value="查询" onClick="firstFindPage(1)" />
<br>

</p>
</div>
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="1" style="padding:2 " bordercolorlight="#3B4D61" bordercolordark="#ffffff" id='contentList'>
</table>
</div>
<br>
<div>
<table width="100%" cellpadding="0" cellspacing="0" border="0" style="padding:2 " id='pageList'>
</table>
</div>
</body>
<script type="text/javascript">
//填充页面信息
function writePageList(curpage,wholePage){
var pageContent = "";
if(curpage != 1){
pageContent += "<a href='#' onclick='findPage(1)' style='text-decoration: none'><b style='font-size: 12'>第一页</b></a>    ";
pageContent += "<a href='#' onclick='findPage("+(parseInt(curpage)-1)+")' style='text-decoration: none'><b style='font-size: 12'>上一页</b></a>    ";
}
if(curpage != wholePage){
pageContent += "<a href='#' onclick='findPage("+(parseInt(curpage)+1)+")' style='text-decoration: none'><b style='font-size: 12'>下一页</b></a>    ";
pageContent += "<a href='#' onclick='findPage("+(parseInt(wholePage))+")' style='text-decoration: none'><b style='font-size: 12'>最后一页</b></a>    ";
}
if(1 == wholePage){
pageContent += "<a href='#' onclick='findPage("+(parseInt(wholePage))+")' style='text-decoration: none'><b style='font-size: 12'>当前只有一页</b></a>    ";
}
pageContent += "页数：<label id='curpage' style='color: red; font-size: 13'>"+curpage+"</label>/<label id='wholepages' style='color: red; font-size: 13'>"+wholePage+"</label>    ";
pageContent += "        <input id='ppage' type='text' size='5'/><input type='button' style='height: 25px;width:55px' value='>>跳转' onclick='gotoPage()'/>";
// alert(pageContent);
$('#pageList').empty();
$('#pageList').append("<tr><td>"+
pageContent
+"</td></tr>");
}
//悠订单状态
function changeStatus(orid){
var status = $('#status'+orid).val();
if(status==null || status==undefined){
alert("状态信息不能为空！");
return;
}
$.post("DetailChange", {
etype : 11,
orid : orid,
status : status
}, function(data) {
if(parseInt(data) > 0)
alert("状态悠成功");
else
alert("修改失败");
});
}
//用于查订单详情
function findOrderDetail(orid){
var urls = "FindOrderDetail.jsp?orid="+orid;
window.open(urls,'newwindow','height=400,width=600,top=100,left=200,toolbar=no,menubar=no,scrollbars=yes,resizable=no,location=no, status=no');
}
//填充表格数据
function writeContent(data){
// alert(data);
var content = data.Orders;
$('#contentList').empty();
$('#contentList').append("<tr>"+
"<td><b style='font-size: 16'>采购编号</b></td>"+
"<td><b style='font-size: 16'>经手人</b></td>"+
"<td><b style='font-size: 16'>订单日期</b></td>"+
"<td><b style='font-size: 16'>备注</b></td>"+
"<td><b style='font-size: 16'>状态</b></td>"+
"<td><b style='font-size: 16'>操作1</b></td>"+
"<td><b style='font-size: 16'>操作2</b></td>"+
"</tr>");
$.each(content,function(idx, item) {
var tdc = "<tr>"+
"<td>"+String(item.orid)+"</td>"+
"<td>"+String(item.wname)+"</td>"+
"<td>"+String(item.date)+"</td>"+
"<td>"+String(item.remark)+"</td>"+
"<td><select id='status"+String(item.orid)+"' style='height: 25px;width:80px'>"+
"<option value='"+String(item.orderstatus)+"' SELECTED>未结</option>"+
"<option value='未结'>未结</option>"+
"<option value='部分'>部分</option>"+
"<option value='已结'>已结</option>"+
"</select></td>"+
"<td><input type='button' value='修改状态' style='height: 25px;width:80px' onclick='changeStatus("+String(item.orid)+")'/></td>"+
"<td><input type='button' value='查看详情' style='height: 25px;width:80px' onclick='findOrderDetail("+String(item.orid)+")'/></td>"+
"</tr>";
// alert(tdc);
$('#contentList').append(tdc);
});
}
//用于页页跳转
function findPage(pageId){
var curstatus = $('#orderstatus').val();
$.post("AllCheckAction", {
executetype : 5,
page : pageId,
orderstatus : curstatus,
pagerows :1
}, function(data) {
var contents = data.ContentBody;
$.each(contents,function(id, ite) {
var curpage = ite.page;
var wholePages = ite.wholepage;
con = ite.searchtext;
$.post("AllCheckAction", {
executetype : 6,
scondition : con
},function(data2){
writeContent(data2);
},"json");
writePageList(curpage,wholePages);
});
}, "json");

}
//查询按钮调用
function firstFindPage(pageId){
findPage(pageId);
}
//用于页面跳转响应逻辑处理,即直接由输入页进地跳转
function gotoPage(){
var ppage = $('#ppage').val();
var maxpage = $('#wholepages').innerHTML;
//numint()函数判断是否为数字
if(ppage == null || ppage == undefined || (!numint(ppage))){
alert("无效的页码！");
return;
}
if(parseInt(ppage)>parseInt(maxpage) || parseInt(ppage)<1){
alert("请求页不存在页码！");
return;
}
findPage(ppage);
};
//判断是否为整数
function numint(value) {
var p = "0123456789";
for ( var i = 0; i < value.length; i++) {
var num = p.indexOf(value.charAt(i));
if (num < 0) {
return false;
}
}
return true;
}
</script>
</html>

2 后台页面响应的JAVA代码(即一个标准的Servlet)

代码如下:

package com.ljb.ttt.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.ljb.ttt.impl.BasicDao;
public class AllCheckAction extends HttpServlet {
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
try {
int executetype = -1;
String types = req.getParameter("executetype");
if(types == null)
return;
else
executetype = Integer.valueOf(types);
PrintWriter out = resp.getWriter();
BasicDao bd = new BasicDao();
switch(executetype){
case 5:
String orderStatus = req.getParameter("orderstatus");
Integer page = Integer.valueOf(req.getParameter("page"));
Integer pageSize = Integer.valueOf(req.getParameter("pagerows"));
String condition = "";
String content = "";
Integer wholePages = 0;
if(orderStatus != null && (!orderStatus.equals(""))){
condition = String.format(" and orderstatus='%s'",orderStatus);
}
int wholeSize = bd.count("`order` t1,worker t2", pageSize," and t1.wid=t2.wid" +
condition+" and t1.orid in (select orid from orderdetail)");
if(0 == wholeSize%pageSize)
wholePages = wholeSize/pageSize;
else
wholePages = wholeSize/pageSize + 1;
//对于不正确页的判断处理
if (page >= wholePages)
page = wholePages;
if(page<=1)
page = 1;
condition += String.format(" limit %d,%d",pageSize*(page-1),pageSize);
content = String.format("{\"ContentBody\":[{\"page\":\"%d\",\"wholepage\":\"%d\",\"searchtext\":\""+condition+"\"}]}",
page,wholePages);
out.print(content);
System.out.println(content);
break;
//for OrderClose.jsp in get order data
case 6:
String sconditon = (String)req.getParameter("scondition");
if(sconditon != null){
if(sconditon.equals(""))
out.print(getJsonData(6, "", "Orders",bd));
else
out.print(getJsonData(6, sconditon, "Orders",bd));
}
break;
default:
break;
}
out.flush();
out.close();
} catch (IOException e) {
e.printStackTrace();
}
}
//generate data from a search sql
private String getJsonData(int type,String searchContent,String jsonName,BasicDao bd){
String sql = "";
switch(type){
//获取
case 6:
sql = String.format("select t1.orid,t2.wname,t1.date,t1.remark,t1.orderstatus from `order` t1,worker t2 where t1.wid=t2.wid" +
" and t1.orid in (select orid from orderdetail)%s",searchContent);
break;
default:
break;
}
String temp = bd.getJsonStr(sql,jsonName);
// System.out.println(temp);
return temp;
}
}

3 让Servlet在web.xml中的配置参考

代码如下:

<servlet>
<servlet-name>CheckSaveServlet</servlet-name>
<servlet-class>com.ljb.ttt.servlet.CheckSaveServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckSaveServlet</servlet-name>
<url-pattern>/CheckSaveServlet</url-pattern>
</servlet-mapping>

4 付上本次后台调用的一个关键方法，将查询转化为JSON数据格式的方法

代码如下:

//return DataType {"tittle":[{"colName":"val",..},{},{}]}
public String getJsonStr(String sql,String jsonName){
String jsonStr = "";
String tjson = "";
Connection con = null;
ResultSet rs = null;
PreparedStatement pst = null;
con = sh.getConnection();
HashMap<String,Object> hm = sh.select(con, pst, rs, sql, null);
rs = (ResultSet)hm.get("ResultSet");
int colNum;
try {
colNum = rs.getMetaData().getColumnCount();
String colName[] = new String[colNum];
for(int i= 0;i<colNum;i++)
colName[i] = rs.getMetaData().getColumnName(i+1);
while(rs.next()){
jsonStr += "{";
String temp = "";
for(int i= 0;i<colNum;i++){
temp += "\"";
temp += colName[i];
temp += "\":\"";
temp += rs.getString(i+1);
temp += "\",";
}
jsonStr += temp.substring(0, temp.length()-1);
jsonStr += "},";
}
tjson += "{\""+jsonName + "\":[";
if(jsonStr!="")
tjson += jsonStr.substring(0, jsonStr.length()-1);
tjson += "]}";
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
pst = (PreparedStatement)hm.get("PreparedStatement");
sh.closeAll(rs, pst, con);
return tjson;
}

注：
1 里面没有见到过的方法调用，不用担心，搞过java连接数据库的都没有问题；
2 这个里面有一个比较不足的地方，将页数信息与页面数据分两次AJAX请求得到，这个是非常影响性能的，如果能做到将一次ajax请求，一次解析获取全部需要数据，那就比较出彩了(嵌套JSON就是不错的选择)。
3 由于并非专职搞web开发，发现这个CSS样式搭配起来还是非常费劲的。
最后贴个效果图上来：

使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页

先给大家展示下运行效果图: 1.后台action产生json数据. List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); int totalRows = blackList.size(); StringBuffer sb = new StringBuffer(); sb.append("{\"totalCount\":\""+to
Java Web 简单的分页显示实例代码

本文通过两个方法:(1)计算总的页数. (2)查询指定页数据,实现简单的分页效果. 思路:首先得在 DAO 对象中提供分页查询的方法,在控制层调用该方法查到指定页的数据,在表示层通过 EL 表达式和 JSTL 将该页数据显示出来. 先给大家展示下效果图: 题外话:该分页显示是用 "表示层-控制层-DAO层-数据库"的设计思想实现的,有什么需要改进的地方大家提出来,共同学习进步.废话不多说了,开始进入主题,详细步骤如下所示: 1.DAO层-数据库 JDBCUtils 类用于打开和关闭数据
Java(基于Struts2) 分页实现代码

分页实现的基本过程是这样的: 1. 设置自己的分页器的基本参数(可以从配置文件中读取) ■每页显示的记录条数 ■每次最多显示多少页 2. 编写设置分页器其他参数的函数主要参数有以下几个: 总记录条数总页数当前页号:现在显示的页数每页显示的记录条数当前页开始行(第一行是0行) 第一页页号最后页页号下一页页号上一页页号画面上显示的起始页号画面上显示的结束页号参数基本实现原理:设置以上各个参数,实际上只需要三个参数就可以对所有的其他变量进行设置,即总记录条数,每页显示记录数,每次
举例详解用Java实现web分页功能的方法

分页问题是一个非常普遍的问题,开发者几乎都会遇到,这里不讨论具体如何分页,说明一下Web方式下分页的原理.首先是查询获得一个结果集(表现为查询数据库获得的结果),如果结果比较多我们一般都不会一下显示所有的数据,那么就会用分页的方式来显示某些数据(比如20条).因为Http的无状态性,每一次提交都是当作一个新的请求来处理,即使是换页,上一次的结果对下一次是没有影响的. 这里总结三种实现分页的方式,不知道还有没有别的! 1.每次取查询结果的所有数据,然后根据页码显示指定的纪录. 2.根据页面只取一页
Java分页简介_动力节点Java学院整理

什么是分页技术分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不是全部数据,而是其中的一部分,如果在其中没有找到自习自己想要的内容,用户可以通过制定页码或是翻页的方式转换可见内容,直到找到自己想要的内容为止.其实这和我们阅读书籍很类似. 分页的意义分页确实有效,但它一定会加大系统的复杂度,但可否不分页呢?如果数据量少的话当然可以.但是对于企业信息系统来说数据量不会限制在一个小范围内.如果不顾一切的Select * from某个表,再将返回的数据一古脑的扔给客户,即使客户能够忍受成千
Java操作MongoDB模糊查询和分页查询

本文实例为大家分享了Java操作MongoDB模糊查询和分页查询,供大家参考,具体内容如下模糊查询条件: 1.完全匹配 Pattern pattern = Pattern.compile("^name$", Pattern.CASE_INSENSITIVE); 2.右匹配 Pattern pattern = Pattern.compile("^.*name$", Pattern.CASE_INSENSITIVE); 3.左匹配 Pattern pattern =
Ajax分页插件Pagination从前台jQuery到后端java总结

困惑了我一段时间的网页分页,今天特地整理了一下我完成不久的项目.下面我要分享下我这个项目的分页代码,前后端通吃.希望前辈多多指教. 一.效果图下面我先上网页前台和管理端的部分分页效果图,他们用的是一套代码. 二.上代码前的一些知识点此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法,因为加载会比较慢. 三.前台代码部分 var pageSize =6; //每页显示多少条记录 var total; //总共多少记录 $(function(
Java的MyBatis框架中实现多表连接查询和查询结果分页

实现多表联合查询还是在david.mybatis.model包下面新建一个Website类,用来持久化数据之用,重写下相应toString()方法,方便测试程序之用. package david.mybatis.model; import java.text.SimpleDateFormat; import java.util.Date; public class Website { private int id; private String name; private int visito
Java简单实现SpringMVC+MyBatis分页插件

1.封装分页Page类 package com.framework.common.page.impl; import java.io.Serializable; import com.framework.common.page.IPage; /** * * * */ public abstract class BasePage implements IPage, Serializable { /** * */ private static final long serialVersionUID
jsp+servlet+javabean实现数据分页方法完整实例

本文实例讲述了jsp+servlet+javabean实现数据分页方法.分享给大家供大家参考,具体如下: 这里秉着且行且记的心态,记录下学习过程,学得快忘得快,生怕遗忘,以备日后使用. 用到的部分代码是自己在网上查找,并自己修改,加上自己的理解.也不知道算不算原创,只做自己学习记录. 使用相关:PostgreSQL数据库.dom4j.JSP.Servlet 一.首先是工程格局,来个全局视图方便读者与自己查看与使用思路为: 以config.xml文件记录配置信息,以方便数据库更改,方便移植与重用

js前台分页显示后端JAVA数据响应

相关推荐

随机推荐