


js frontend paging displays backend JAVA data response_javascript skills
May 16, 2016 pm 05:40 PMI haven’t written code for a long time, and my hands were a little itchy. It happened that the implementation of certain functions by the guys below really affected the progress of the project, so I wrote a paragraph myself.
Function: js front-end paging displays background data response (JAVA Servlet is enough)
Framework: jquery1.8.7
Purpose of this article: For those who are new to software development, if you like this, take a look, then Also take a look, copy here, copy there, junior novices can be cool;
1 Programmers need to sit down seriously and down-to-earth;
2 Programming requires investment in order to gain;
3 Yes Only when you gain are you inspired and motivated to move forward step by step!
The code is below, and there will be small comments for details
1. Logical processing of web pages (when js code is written into the page, there is an advantage. It will not be affected by js during debugging. Impact of file caching)
<%@ 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("Status successful");
else
alert("Modification failed");
});
}
//Used to check order details
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');
}
//Fill table data
function writeContent(data){
// alert(data);
var content = data.Orders;
$('#contentList').empty() ;
$('#contentList').append("<tr>"
"<td><b style='font-size: 16'>Purchase number</b>< ;/td>"
"<td><b style='font-size: 16'>Handler</b></td>"
"<td>< b style='font-size: 16'>Order Date</b></td>"
"<td><b style='font-size: 16'>Remarks< /b></td>"
"<td><b style='font-size: 16'>Status</b></td>"
"<td> ;<b style='font-size: 16'>Operation 1</b></td>"
"<td><b style='font-size: 16'>Operation 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>Open </option>"
"<option value='Open'>Open</option>"
"<option value='Part'>Part</option>"
"<option value='Close'>Close</option>"
"</select></td>"
"<td><input type ='button' value='Modify Status' style='height: 25px;width:80px' onclick='changeStatus(" String(item.orid) ")'/></td>"
"< ;td><input type='button' value='View details' style='height: 25px;width:80px' onclick='findOrderDetail(" String(item.orid) ")'/></td> ;"
"</tr>";
// alert(tdc);
$('#contentList').append(tdc);
});
}
//For page jump
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");
}
//Query button calls
function firstFindPage(pageId){
findPage(pageId );
}
//Used for page jump response logic processing, that is, jumping directly from the input page
function gotoPage(){
var ppage = $('#ppage') .val();
var maxpage = $('#wholepages').innerHTML;
//numint() function determines whether it is a number
if(ppage == null || ppage == undefined | | (!numint(ppage))){
alert("Invalid page number! ");
return;
}
if(parseInt(ppage)>parseInt(maxpage) || parseInt(ppage)<1){
alert("The requested page does not have a page number! ");
return;
}
findPage(ppage);
};
//Determine whether it is an integer
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 code for background page response (i.e. a standard 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样式搭配起来还是非常费劲的。
最后贴个效果图上来:


Hot Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial

8 Stunning jQuery Page Layout Plugins
